.aw-nav {
    padding-top: 1.5rem;
    padding-top: calc(0.5rem + max(16px, calc(env(safe-area-inset-top) - 16px)));

    &__wrapper {
        overflow-y: auto;
        overscroll-behavior: contain;

        scrollbar-width: thin;
        scrollbar-color: rgba(var(--c-on-surface-rgb), 0.15) rgba(var(--c-on-surface-rgb), 0.1);

        &::-webkit-scrollbar {
            width: 6px;
            height: 6px;
            background-color: rgba(var(--c-on-surface-rgb), 0.1);
        }

        &::-webkit-scrollbar-thumb {
            background-color: rgba(var(--c-on-surface-rgb), 0.1);
        }

        max-height: calc(100vh - 5rem);
        padding-bottom: 2rem;
    }

    &__title {
        @apply text-xl font-heading mb-5 truncate;
        font-style: normal;
        font-weight: bold;
        padding-right: 1.6875rem;
        padding-left: 1.6875rem;
    }

    &__item {
        display: flex;
        align-items: center;

        &:not(:first-child) {
            @apply mt-2;
        }
    }

    &__toggler {
        @apply p-1;
        margin-left: auto;
        margin-right: 1.25rem;

        svg {
            @apply text-mono-400;

            transform: rotate(180deg);
            transition: 240ms transform;
        }

        &--open svg {
            @apply text-on-surface;

            transform: rotate(90deg);
        }
    }

    &__child {
        max-width: 100%;
        min-width: 0;
        color: inherit;
        padding-right: 1.6875rem;
        padding-left: 1.6875rem;
        flex-grow: 1;
        @apply flex items-center py-2;

        & > svg {
            @apply mr-2;
        }

        & > span {
            @apply block truncate;
        }

        &--sub {
            @apply text-sm text-mono-400;
            position: relative;
            transition: 120ms color;

            &:hover,
            &:focus-visible {
                color: inherit;
            }

            &:before {
                display: block;
                width: 6px;
                height: 6px;
                margin-top: -3px;
                border-radius: 50%;
                background-color: var(--c-mono-100, green);

                position: absolute;
                left: theme('spacing.8');
                top: 50%;
            }
        }

        &--sub {
            padding-left: calc(2.1875rem + 16px);
        }

        &--active {
            color: inherit;

            &:before {
                content: '';
            }
        }
    }
}