.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; } }