#address-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1em;
}

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

    details.address summary {
        background: #86799b;
        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;
    }

.chips {
    white-space: nowrap;
}

.chip {
    font-size: .8em;
    padding: .25em 1em;
    border-radius: 2em/100%;
    background: #aaa;
    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;
}