:root {
    --purple: #4a2048;
    --lightgrey: #F1F1F1;
}


#address-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1em 0;
    justify-content: space-between;
}

details.address {
    padding: 1em;
    background: var(--lightgrey);
    /*box-shadow: inset 0 0 0 2px #E7E7E7;*/
    max-width: calc(50% - .5em);
    min-width: 24em;
    flex-grow: 1;
    border-radius: 10px;
    box-shadow: none;
    overflow: hidden;
}

details.address summary {
    background: var(--purple);
    color: #fff;
    padding: .75em;
    padding-right: 2.5em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: -1em;
    cursor: pointer;
    position: relative;
    transition: background .25s ease;
    min-height: 50px;
}

details.address.removed summary {
    background: #9E9E9E;
    color: #ddd;
}

details.address summary .summary {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

details.address.removed summary .summary {
    text-decoration: line-through;
}

details.address.removed summary .chip:not(.address-type) {
    display: none;
}

details.address summary::after {
    content: '';
    width: 1em;
    height: 1em;
    position: absolute;
    right: 0;
    transition: transform .25s ease;
    border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
    transform: translate(-.75em,-.25em) rotate(45deg);
}

details.address[open] summary::after {
    transform: translate(-.75em,.25em) rotate(45deg) scale(-1);
}

details.address summary + * {
    margin-top: 2em;
}

details.address .btn{
    font-size: .8em;
}

.chips {
    white-space: nowrap;
}

.chip {
    font-size: .8em;
    padding: .25em 1em;
    border-radius: 2em/100%;
    background: var(--purple-midlight);
    margin-left: .25em;
}

.chip:empty {
    display: none;
}

.chip.address-type {
    background: #E27564;
}

details.address label {
    font-size: .9em;
}

details.address .hide-label label {
    display: none;
    margin-top: -.5em;
    margin-bottom: .25em;
}

details.address .hide-label label.shown {
    display: block;
}

details.address button[data-cmd=undo] {
    display: none;
}

details.address.removed button[data-cmd=undo] {
    display: block;
}

details.address.removed button[data-cmd=delete] {
    display: none;
}

@media screen and (max-width: 992px) {
    details.address {
        max-width: none;
        min-width: 0;
        width: 100%;
    }

    details.address summary {
        flex-wrap: wrap;
    }
}

.add-address-container {
    margin-top: 15px;
    text-align: center;
}

.add-address-container .btn{
    font-size: .8em;
}