.customer-menu {
    position: relative;
}

.customer-menu summary {
    color: inherit;
    cursor: pointer;
    font-weight: 600;
    list-style: none;
    padding: .8rem 1rem;
    white-space: nowrap;
}

.customer-menu summary::-webkit-details-marker {
    display: none;
}

/* An SVG chevron instead of a text glyph (was "\25BE"/"\25B4"). A Unicode
   triangle character sits at whatever vertical position the current font
   happens to draw it at - that varies by font and by browser, and was
   contributing to "Customer" reading as misaligned from the plain text nav
   items next to it. An SVG has an explicit, fixed box and no such
   variance. */
.customer-menu__caret {
    width: 1rem;
    height: 1rem;
    margin-left: .5rem;
    vertical-align: middle;
    color: currentColor;
    transition: transform .2s ease;
}

.customer-menu[open] .customer-menu__caret {
    transform: rotate(180deg);
}

.customer-menu__items {
    background: #fff;
    border: 1px solid #d8e0e8;
    border-top: 3px solid #12466f;
    border-radius: 0 0 .6rem .6rem;
    box-shadow: 0 .8rem 2.4rem rgba(18, 70, 111, .18);
    min-width: 22rem;
    padding: .8rem 0;
    position: absolute;
    right: 0;
    top: calc(100% + .4rem);
    z-index: 100;
}

.customer-menu__items a,
.customer-menu__disabled {
    color: #12466f;
    display: flex;
    justify-content: space-between;
    margin: 0;
    padding: 1rem 1.5rem;
    text-decoration: none;
    white-space: nowrap;
}

.customer-menu__items a:hover,
.customer-menu__items a:focus {
    background: #eaf2f8;
    color: #12466f;
}

.customer-menu__disabled {
    color: #7a8792;
    cursor: not-allowed;
}

.customer-menu__disabled small {
    color: #6b4e00;
    font-size: 1rem;
    margin-left: 1.2rem;
}

.customer-menu__items .customer-menu__logout {
    border-top: 1px solid #d8e0e8;
    color: #9f2d2d;
    margin-top: .5rem;
}

.customer-menu__items form {
    margin: 0;
}

@media (max-width: 760px) {
    .customer-menu__items {
        left: 0;
        right: auto;
    }
}