$inner-size: 32px;
$padding: 8px;

.container {
    width: 100%;
    user-select: none;

    z-index: 100;

    ul {
        list-style: none;
    }
}

.header {
    min-height: $inner-size;
    padding-top: $padding;
    padding-bottom: $padding;
    box-sizing: content-box;

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "menutoggle sitelogo loginstate";
    justify-content: space-between;

    & > li {
        min-height: $inner-size;
    }
}

.headerItemMenuToggle {
    grid-area: menutoggle;

    & > button {
        width: $inner-size;
        height: $inner-size;

        border: none;
        background: transparent;

        cursor: pointer;
    }
}

.headerItemLoginState {
    grid-area: loginstate;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    height: $inner-size;
    padding-left: 12px;
}

.headerItemSiteLogo {
    grid-area: sitelogo;

    a {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        height: 100%;
    }

    &:not(:hover) {
        @keyframes blink {
            0% {
                transform: scaleY(1);
                opacity: 1;
            }

            25% {
                transform: scaleY(0.2);
                opacity: 0;
            }

            50% {
                transform: scaleY(1);
                opacity: 1;
            }

            75% {
                transform: scaleY(0.2);
                opacity: 0;
            }

            100% {
                transform: scaleY(1);
                opacity: 1;
            }
        }

        :global(.frog_svg__pupilR),
        :global(.frog_svg__pupilL),
        :global(.frog_svg__eyeR),
        :global(.frog_svg__eyeL) {
            transform-origin: 0 7px;
            animation: blink 0.4s 2s ease;

            @media (prefers-reduced-motion) {
                animation: none;
            }
        }
    }
}

.menu {
    position: absolute;
    left: 0;
    right: 0;

    z-index: 100;

    width: 100%;
    height: calc(100vh - $inner-size - 16px);

    overflow: auto;

    .container[data-open="false"] & {
        display: none;
        visibility: hidden;
    }
}

@mixin border-bottom-no-layout-shift {
    padding-bottom: $padding - 1px;
    border-bottom: 1px solid inherit;
}

// Sidebar
@media (width >= 500px) {
    .container[data-open="true"] .header {
        @include border-bottom-no-layout-shift;
    }

    .menu {
        width: 300px;
        border-right: 1px solid var(--g600);
    }
}

.searchContainer {
    padding: $padding;
}

.search {
    width: 100%;
}

.links {
    padding: 0 $padding;

    > li {
        padding: 1.5 * $padding;

        &:not(:last-child) {
            border-bottom: 1px solid var(--g400);
        }

        a {
            display: block;
            width: 100%;
            height: 100%;
        }
    }
}

.desktopLinks {
    grid-area: desktoplinks;

    margin-left: $padding;

    display: flex;
    align-items: center;

    > ul {
        display: flex;
        align-items: center;

        > li {
            height: $inner-size;

            display: flex;
            align-items: center;
        }
    }

    .container[data-force-toggle="false"] & {
        display: none;
    }
}

// on mobile
@media (width <= 700px) {
    body:has(.container[data-open="true"]) {
        // Disable scrolling
        overflow: hidden;
    }
}

.customchildren {
    display: none;
}

// has custom children
.container[data-force-toggle="true"] .header {
    grid-template-columns: $inner-size 1fr auto;
    grid-template-areas: "menutoggle customchildren loginstate";

    // override tailwind padding
    padding-left: $padding;
    padding-right: $padding;

    .headerItemSiteLogo {
        display: none;
    }

    .customchildren {
        grid-area: customchildren;
        justify-self: center;

        display: flex;
        align-items: center;
        width: 100%;

        overflow: hidden;
    }
}

@media (width >= 700px) {
    // no toggle menu
    .container[data-force-toggle="false"] {
        .header {
            grid-template-columns: auto 1fr auto;
            grid-template-areas: "sitelogo desktoplinks loginstate";
        }

        .headerItemMenuToggle,
        .menu {
            display: none;
        }

        .desktopLinks {
            display: flex;
        }
    }
}
