.menuOpenAndCloseBtn {
    aspect-ratio: 1 / 1;
    width: 2rem;
    position: absolute;
    right: -1px;
    top: -1px;
    contain: content;
    box-sizing: border-box;
    border: 1px solid transparent;
    gap: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: +10;

    figure {
        display: block;
        width: 1.5rem;
        height: 2px;
        background-color: white;
        opacity: .5;
        transition: opacity var(--ease-fast);
        border-radius: 10px;
    }

    &:hover figure { opacity: 1; }
}

.menuContainer {
    aspect-ratio: 1 / 1;
    height: 2rem;
    position: fixed;
    right: calc(var(--padding-lg) * 2);
    top: var(--padding-lg);
    contain: content;
    box-sizing: border-box;
    transition: var(--ease-fast);
    overflow: hidden;
    z-index: 999;
}

.menuOpen {
    aspect-ratio: 9 / 12;
    height: fit-content;
    min-height: 220px;
}

.menuContent {
    display: flex;
    flex-direction: column;
    padding: var(--padding);
    box-sizing: border-box;
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: opacity var(--ease-fast);
    background-color: rgba(0, 0, 0, 0.5);
}

.menuContentHeader {
    position: absolute;
    top: var(--padding);
    left: var(--padding);
    width: calc(90% - var(--padding));
    height: 10px;
}

.menuContentbtns {
    margin-top: calc(var(--gap-sm) + 1.5rem);
    display: flex;
    flex-direction: column;

    button {
        transition: opacity var(--ease-fast);
        opacity: 0;

        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--gap-sm);
        border: 1px solid transparent;
        border-radius: var(--radius-sm);
        padding: 5px 0px;

        &:hover {
            opacity: 1 !important;
            border: 1px solid rgba(111,76,255,0.08);
            background: linear-gradient(180deg, rgba(111,76,255,0.06), rgba(71,255,210,0.03));
        }
    }

}

.menuContentShow { opacity: 1; }

.menuOptions {
    display: flex;
    flex-direction: row;
    gap: var(--gap-sm);

    button {
        transition: opacity var(--ease-fast);
        opacity: 0.8;
        aspect-ratio: 1 / 1;
        width: 1rem;

        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--gap-sm);
        border: 2px solid transparent;
        border-radius: var(--radius-sm);
        padding: 5px;

        &:hover {
            opacity: 1 !important;
            border: 2px solid rgba(111,76,255,0.08);
            background: linear-gradient(180deg, rgba(111,76,255,0.06), rgba(71,255,210,0.03));
        }
    }

    button.active {
        border: 2px solid lightgreen;
    }
}