.button-multi-container {
    width: fit-content;
}

.button-multi {
    position: relative;
    z-index: 3;
}

.button-multi::before {
    content: none;
}

.button-multi-content {
    color: #1d1d1f;
    border: 1px solid #d8d8d8;
    background-color: #f7f7f7;
    display: flex;
    flex-direction: column;
    border-radius: 6px;
    min-width: 28px;
    width: fit-content;
    margin-top: 7px;
    overflow: hidden;
    position: absolute;
    opacity: 0;
    transition: 0.25s ease-out;
    z-index: 2;
    pointer-events: none;
}

.button-multi-content-slide {
    transform: translateY(-15px);
}

.button-multi-option-active {
    opacity: 1;
    transform: translateY(0px);
    pointer-events: visible;
}

.button-multi-content-right {
    right: 0;
}

.row .button-multi-content-right {
    right: 1.5em;
}

@media only screen and (max-width: 734px) {
    .row .button-multi-content-right {
        right: 0;
    }
}

div.localnav-action .button-multi-content-right {
    right: 20px;
}

@media only screen and (max-width: 767px) {
    div.localnav-action .button-multi-content-right {
        right: 16px;
    }
}

.button-multi-option {
    color: #515154 !important;
    border-bottom: 1px solid rgb(216, 216, 216, 0.53);
    padding: 6px 16px;
}

.button-multi-option:last-child {
    border-bottom: none;
}

.button-multi-option:hover {
    background-color: #f0f0f0;
    text-decoration: none;
    color: #06c !important;
}

.button-multi-option:focus {
    outline: 4px solid rgba(0, 125, 250, 0.6);
    outline-offset: -5px;
}

.button-multi-option:active {
    background-color: #0071e3;
    color: #fff !important;
}

/* DARK MODE */
body[data-color-scheme="dark"] .button-multi-content {
    color: #fff;
    border: 1px solid #545454;
    background-color: var(--fill-tertiary);
}

body[data-color-scheme="dark"] .button-multi-option {
    color: var(--glyph-gray) !important;
    border-bottom: 1px solid #575757;
    opacity: 0.7;
}

body[data-color-scheme="dark"] .button-multi-option:last-child {
    border-bottom: none;
}

body[data-color-scheme="dark"] .button-multi-option:hover {
    background-color: var(--fill-secondary);
    color: var(--glyph-blue) !important;
    text-decoration: none;
    opacity: 1;
}

body[data-color-scheme="dark"] .button-multi-option:active {
    background-color: #0071e3;
    color: #fff !important;
}