.aw-mobile-menu-item {
    @apply bg-surface;
    font-size: theme('fontSize.base', 1rem);
    display: flex;
    align-items: center;
    width: 100%;

    &:hover,
    &:focus {
        outline: none;
        text-decoration: none;
    }

    &--active {
        color: var(--c-mono-100);
        font-weight: bold;

        .aw-mobile-menu-item__icon-bg {
            color: var(--c-mono-100);
        }
    }

    &__icon-bg {
        align-self: start;
        display: block;
        flex: none;

        margin-right: 1rem;
        line-height: 1;
        color: var(--c-mono-100);
    }

    &__text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 0.25rem;

        font-size: 1rem;
        line-height: 1.5;

        padding-right: 1rem;
        flex-grow: 1;
    }

    &__description {
        color: var(--c-mono-400);
        font-size: 0.875rem;
        font-weight: 400;
        line-height: 1rem;
    }

    &__arrow {
        flex: none;
    }

    &--default,
    &--primary {
        padding: 1rem 1.5rem;
    }

    &--island {
        padding: 1.5rem;
        border-radius: 0.9375rem;
    }
}