.aw-tab-nav {
    @apply border-b border-mono-800 text-mono-700;
    display: flex;
    align-items: center;

    &__toggler {
        @apply text-mono-400;
        display: flex;
        align-items: center;
        font-size: theme('fontSize.sm');
        whitespace: 'nowrap';
    }

    &__toggler > span {
        @apply font-black uppercase text-xs;
        height: 100%;
        padding: theme('spacing.4') theme('spacing.4');
        transition: color 300ms;
        position: relative;
        display: flex;
        align-items: center;

        letter-spacing: 1.5px;
        line-height: 18px;
    }

    &__toggler > span:before {
        @apply border-l border-mono-800 text-mono-700;
        content: '';
        left: calc(-1 * theme('spacing.3'));
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: theme('spacing.6');
        display: block;
    }

    &__toggler > span:after {
        content: '';
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 2px;
        background-color: transparent;
        transition: background-color 300ms;
    }

    &__toggler:first-child > span:before {
        content: none;
    }

    &__toggler:hover {
        @apply text-on-surface;
    }

    &__toggler:focus,
    &__toggler > span:focus {
        outline: none;
    }

    &__toggler:focus > span {
        @apply text-on-surface;
        outline: theme('focusOutline', none);
    }

    &__toggler_active > span {
        @apply text-on-surface;
    }

    &__toggler_active > span:after {
        @apply bg-mono-50;
    }

    &_active > span {
        color: var(--c-on-surface);

        &::after {
            background-color: var(--c-on-surface);
        }
    }

    & > span:before {
        display: none;
    }
}