.secondary-nav{
    &-trigger{
        @apply block w-full h-px bg-white;
    }
    transition: top .5s ease, opacity .2s ease;
    @apply sticky top-0 bg-white z-40 flex items-center opacity-0;
    ul{
        padding-left: var(--grid-offset);
        padding-right: var(--secondary-nav-button-width);
        @apply flex overflow-auto whitespace-nowrap;
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
        &::-webkit-scrollbar {
            display: none;
        }
        li{
            @apply py-[1.25vw];
            a{
                @apply text-size-base;
            }
            &:not(:last-child){
                @apply mr-[2.15vw];
            }
        }
    }
    > a{
        @apply absolute -right-0 top-0 h-full flex items-center text-size-base text-grey-300 z-10 py-[0.25vw];
        span{
            @apply inline-flex items-center bg-white pr-[calc(var(--grid-gutter)*2)]; 
            &::after{
                content: '';
                background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'%3E%3Cpath d='m14.333 8 4.167 4.5m0 0L14.333 17m4.167-4.5H6' stroke='%23A3ADAD'/%3E%3C/svg%3E");
                background-size: 100%;
                @apply w-[1.75vw] aspect-square bg-no-repeat bg-center ml-[0.5vw];
            }    
        }
        &::before{
            content: '';
            background: rgb(255,255,255);
            background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 80%);
            @apply w-[5vw] h-full;
        }
    }
    &.is-stacked{
        @apply top-[var(--header-height)]
    }
    &.is-visible{
        @apply opacity-100;
    }
}