:root {
    --bar-height: 0.3rem;
    --bar-gap: 0.1rem;
    --hamburger-height: calc(var(--bar-height) * 3 + var(--bar-gap) * 2);
}

.menu-wrapper {
    display: flex;
    flex-direction: row;
    flex: 0 0 0%;
    justify-content: flex-start;
}

.hamburger-menu {
    --x-width: calc(var(--hamburger-height) * 1.67);
    display: flex;
    flex-direction: column;
    margin-right: 0.2rem;
    width: max-content;
    z-index: 2;
    cursor: pointer;

    & input {
        appearance: none;
        padding: 0px;
        outline: none;
        pointer-events: none;
    }

    &::before, &::after, & input {
        margin: var(--bar-gap);
        padding: 0px;
        content: "";
        width: 2rem;
        height: var(--bar-height);
        background-color: #d3af37;
        border-radius: 9999px;
        transform-origin: left center;
    }
}
/*
.hamburger-menu::before,
.hamburger-menu::after,
.hamburger-menu input {
    margin: var(--bar-gap);
    padding: 0px;
    content: "";
    width: 2rem;
    height: var(--bar-height);
    background-color: #d3af37;
    border-radius: 9999px;
    transform-origin: left center;
}

.hamburger-menu input {
    appearance: none;
    padding: 0px;
    outline: none;
    pointer-events: none;
}
*/
.hamburger-menu:has(input:checked)::before {
    rotate: 45deg;
    width: var(--x-width);
    translate: 0 calc(var(--bar-height) / -2);
}
.hamburger-menu:has(input:checked)::after {
    rotate: -45deg;
    width: var(--x-width);
    translate: 0 calc(var(--bar-height) / 2);
}

.hamburger-menu input:checked {
    opacity: 0;
    width: 0px;
}

#gallery-menu:has(#burger-menu-checkbox:not(:checked)) { 
    & .sidebar-content {
        content-visibility: hidden;
        display: flex;
        height: 0px;
    }
    & .gallery-year-menu-header {
        padding: 0px;
    }
}