.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-3.75;
            }
            .site-header-topbar__search{
                svg{
                    @apply w-[22px] h-9 block;
                }
            }
        }
    }
    &-navbar{
        @apply h-12.5 xl:h-15 flex items-center bg-white;
        &__inner{
            @apply grid-container flex items-center justify-between xl:grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-x-[calc(var(--grid-gutter)*2)];
/* 
            @apply grid-container grid grid-cols-12 items-center justify-between gap-x-[calc(var(--grid-gutter)*2)]; */
        }
        &__main{
            @apply flex justify-between items-center;
            @screen xl{
                grid-column: 2 / 5;
            }
            nav{
                @apply hidden xl:block;
                ul{
                    li{
                        @apply select-none;
                    }
                }
                > ul{
                    @apply flex items-center;
                    > li{
                        &:not(:last-child){
                            @apply mr-6 xl:mr-8;
                        }
                        > a{
                            @apply block;
                        }
                        &.is-toggled{
                            > a{
                                @apply underline;
                            }
                        }
                    }
                }
            }
            .site-header-navbar__actions{
                @apply flex items-center translate-x-[calc(var(--grid-gutter)*1.75)] xl:translate-x-[calc(var(--grid-gutter)*1.25)];
                > a{
                    @apply xl:hidden translate-y-px mr-2;
                }
                .hamburger-btn{
                    @apply xl:hidden;
                    &.is-active{
                        @apply xl:flex;
                    }
                }
            }
        }
        &__title{
            @apply font-bold;
        }
        &-submenu{
            li{
                /* .menu-item{
                    @apply relative overflow-hidden;
                    &-overlay{
                        @apply absolute z-10 !important;
                        @apply bg-black w-full h-full block overflow-hidden top-0 left-0 pointer-events-none opacity-100;            
                    }
                    > a{
                        transition: color .4s ease;
                        @apply block text-black;
                    }
                    &:hover{
                        > a{
                            @apply relative text-white z-20;
                        }
                    }
                } */
            }
            > li{
                @apply mr-0;
                > a{
                    @apply inline-block w-full py-2 text-size-sm;
                    &:hover{
                        @apply bg-black text-white;
                    }
                }
            }
            &-0{
                padding-left: var(--grid-offset);
                padding-right: calc(var(--grid-gutter) * 2);
                orphans: 1;
                transform: translateZ(0) translateY(calc(100% - 2px));
                @apply 
                    absolute
                    bottom-0 
                    left-0 
                    w-full 
                    bg-white 
                    columns-3 
                    pt-10
                    pb-12.5
                    gap-x-[calc(var(--grid-gutter)*2)] 
                    opacity-0 invisible pointer-events-none
                ;
                &.is-visible{
                    @apply opacity-100 visible pointer-events-auto;
                    > li{
                        @apply opacity-100;
                    }
                    &.is-closing{
                        > li{
                            transition: opacity .1s ease;
                            @apply opacity-0;
                        } 
                    }
                }
                @at-root .site-header.is-hidden .site-header-navbar__main .site-header-navbar-submenu-0{
                    @apply hidden;
                }
                > li {
                    transition: opacity .25s ease .25s;
                    @at-root .site-header-navbar__main nav.is-toggled .site-header-navbar-submenu-0 > li{
                        transition: none;
                    }
                    @apply break-inside-avoid opacity-0;
                    > a{
                        @apply font-bold border-y border-t-black border-b-grey-200;
                        &:first-child:last-child{
                            @apply border-b border-b-grey-200;
                        }
                    }
                }
            }
            &:not(.site-header-navbar-submenu-0){
                > li{
                    @apply border-b border-grey-200;
                    &:hover{
                        > a{
                            @apply bg-black text-white;
                        }
                    }
                    > a{
                        @apply grid grid-cols-4 gap-x-[var(--size-ratio-base)];
                        > span{
                            grid-column: 2 / 5;
                        }
                    }
                }
            }
        }
    }
}

#overlay{
    transition: all .5s ease;
    @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 pointer-events-auto;
    }
}