.site-header{
    transition: transform .5s ease;
    @apply z-50;
    @apply sticky top-0 z-40 translate-y-0;
    @at-root body.has-menu-toggled .site-header{
        @apply border-b border-black md:border-b-0;
    }
    &.is-hidden{
        @apply xl:translate-y-[-100%];
    }
    &-topbar{
        @apply bg-black text-white h-10 hidden xl:flex items-center;
        &__container{
            @apply flex items-center justify-between text-size-sm;
            nav{
                ul{
                    @apply flex items-center;
                    li{
                        a{
                        }
                        &:not(:last-child){
                            @apply mr-5;
                        }
                    }
                }
            }
        }
        &__actions{
            @apply flex items-center;
            .site-header-topbar__lang{
                @apply mr-4;
            }
            .site-header-topbar__search{
                svg{
                    @apply w-5 h-5 block;
                }
            }
        }
    }
    &-navbar{
        @apply h-12.5 xl:h-15 flex items-center bg-white;
        &__inner{
            @apply grid-container flex items-center justify-between;
        }
        &__main{
            @apply xl:w-3/4 flex justify-between items-center;
            nav{
                @apply hidden xl:block;
                > ul{
                    @apply flex items-center;
                    > li{
                        &:not(:last-child){
                            @apply mr-6 xl:mr-8;
                        }
                        &.is-toggled{
                            > a{
                                @apply font-bold;
                            }
                        }
                    }
                }
            }
            .hamburger-btn{
                @apply xl:hidden translate-x-[calc(var(--grid-gutter)*1.75)] xl:translate-x-[calc(var(--grid-gutter)*1.25)];
                &.is-active{
                    @apply xl:flex;
                }
            }
        }
        &__title{
            @apply font-bold xl:w-1/4;
        }
        &-submenu{
            > li{
                @apply mr-0;
                > a{
                    @apply inline-block w-full py-2 text-size-sm;
                }
            }
            &-0{
                padding-left: var(--grid-offset);
                padding-right: calc(var(--grid-gutter) * 2);
                @apply 
                    absolute
                    bottom-0 
                    left-0 
                    translate-y-[100%]
                    w-full 
                    bg-white 
                    columns-3 
                    pt-10
                    pb-12.5
                    gap-x-[calc(var(--gutter-grid)*2)] 
                    opacity-0 invisible pointer-events-none
                ;
                @at-root .site-header-navbar__main ul li.is-toggled .site-header-navbar-submenu-0{
                    @apply opacity-100 visible pointer-events-auto;
                }
                @at-root .site-header.is-hidden .site-header-navbar__main .site-header-navbar-submenu-0{
                    @apply hidden;
                }
                > li {
                    @apply inline-block w-full;
                    > a{
                        @apply font-bold border-t-2 border-grey-400;
                    }
                }
            }
            &:not(.site-header-navbar-submenu-0){
                > li{
                    @apply border-t border-grey-200;
                    @apply grid grid-cols-4 gap-x-[var(--size-ratio-base)];
                    > a{
                        grid-column: 2 / 5;
                    }
                }
            }
        }
    }
}

#overlay{
    @apply fixed top-0 left-0 w-full h-screen bg-black bg-opacity-50 z-30 opacity-0 invisible pointer-events-none;
    &.is-active{
        @apply opacity-100 visible;
    }
}