.secondary-nav{
    &-trigger{
        @apply block w-full h-px bg-transparent;
    }
    transition: top .5s ease, opacity .2s ease;
    @apply fixed top-[var(--header-height)] lg:top-0 w-screen bg-white z-30 flex items-center opacity-0;
    &::before{
        content: '';
        width: calc(100vw - var(--grid-gutter)*4);
        @screen md{
            width: calc(100vw - var(--grid-gutter)*2 - var(--grid-offset));
        }
        @apply absolute h-px top-0 left-[calc(var(--grid-gutter)*2)] md:left-[var(--grid-offset)] bg-grey-200 lg:hidden;
    }
    &::after{
        content: '';
        background: rgb(255,255,255);
        background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 80%);
        @apply absolute w-12 h-full right-0 pointer-events-none;
    }
    ul{
        padding-left: calc(var(--grid-gutter) * 2);
        padding-right: calc(var(--grid-gutter) * 2);
        @screen md{
            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;
        }
        @apply h-12.5 xl:h-15 flex items-center;
        li{
            a{
                @apply text-size-base;
            }
            &:not(:last-child){
                @apply mr-7.5;
            }
        }
    }
    > a{
        @apply absolute -right-0 top-0 h-full hidden lg:flex items-center text-size-base text-grey-300 z-10 py-3;
        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-7.5 aspect-square bg-no-repeat bg-center ml-2.5;
            }    
        }
        &::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-16 h-full;
        }
    }
    &.is-stacked{
        @apply top-[var(--header-height)]
    }
    &.is-visible{
        @apply opacity-100;
    }
}