.MenuBar {
    position: sticky;
    top: 0; left: 0; right: 0;

    --bgColor: #fff;

    --optionGap: 0;
    --optionPadding: 15px;
    --menuHeight: 50px;

    background: var(--bgColor);

    transition: box-shadow 500ms ease-in-out;

    &.scrolled {
        box-shadow: 0 7px 10px hsla(var(--color-primary-hue), var(--color-primary-saturation), var(--color-primary-brightness), 5%);
    }

    > nav {
        height: var(--menuHeight);
        margin: 0 auto;
        box-sizing: border-box;
        width: var(--content-width);
        max-width: 100vw;
        padding: 0 var(--gap-big);

        display: grid;
        grid-template-columns: 1fr max-content 1fr;
        grid-template-areas:
            "logo menu toggle";
        align-items: center;

        gap: var(--optionGap);

        > .logo {
            grid-area: logo;

            padding: 0;
            margin-top: -3px;
            display: flex;

            opacity: 1;
            transition: opacity 300ms ease-in-out;

            height: var(--menuHeight);


            > .image {
                width: 70px;
                aspect-ratio: 3.728;
                mask-repeat: no-repeat;
                mask-position: center;
                background-color: var(--color-primary);
            }

            > .title {
                font-weight: 600;
                text-transform: uppercase;
            }
        }

        > .Menu {
            grid-area: menu;
            flex-grow: 1;
        }

        > #toggle {
            grid-area: toggle;

            display: none;

            + label {
                justify-self: end;

                display: none;
                width: 33px;
                height: 33px;
                cursor: pointer;
                color: var(--color-primary);

                justify-content: center;
                align-items: center;
            }
        }

        /* Small screen menu */
        @media all and (max-width: 600px) {
            grid-template-columns: 1fr 1fr;
            grid-template-rows: var(--menuHeight) 1fr;
            grid-template-areas:
                "logo toggle"
                "menu menu";
            align-items: center;

            box-shadow: 0 7px 15px hsla(var(--color-primary-hue), var(--color-primary-saturation), var(--color-primary-brightness), 15%);

            transition: all 200ms;
            height: var(--menuHeight);
            overflow: hidden;

            > .Menu {

                align-self: flex-start;

                flex-direction: column;
                justify-content: flex-start;
                align-items: flex-start;

                opacity: 0;

                transition: opacity 400ms ease-in-out;

                height: max-content;

                > .MenuOption {
                    flex-direction: column;
                    align-items: flex-start;
                    padding: 0;
                    > .Dropdown {
                        position: relative !important;
                        opacity: 1 !important;
                        top: auto !important;
                        overflow: hidden;
                        > div {
                            box-shadow: none !important;
                            border: none !important;
                        }
                    }
                }
            }

            > #toggle + label {
                display: flex;
            }

            &:has(#toggle:checked) {
                height: 100vh;

                > .Menu {
                    height: calc(100vh - var(--menuHeight));
                    opacity: 1;
                    overflow-y: scroll;
                    overscroll-behavior: none;
                }
            }

        }

    }

    z-index: 2;
}

.MenuBar.noLogo:not(.scrolled) > nav > .logo {
    opacity: 0;
}