.aw-icon-menu-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: inherit;
    width: 100%;
    max-width: 144px;

    position: relative;

    &:hover {
        .aw-icon-menu-item {
            &__icon,
            &__text {
                color: var(--c-mono-100);
            }
        }
    }

    &--active {
        .aw-icon-menu-item {
            &__icon,
            &__text {
                color: var(--c-mono-100);
            }
        }
    }

    &__icon {
        display: block;
        color: var(--c-mono-300);
        transition: 60ms color;

        &-block {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;

            padding: 0.5rem 0.125rem;

            position: relative;
            max-width: 100%;
        }
    }

    &__text {
        display: block;

        font-size: 0.625rem;
        font-weight: 400;
        line-height: 0.659375rem;
        color: var(--c-mono-100);
        transition: 60ms color;

        text-align: center;

        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        width: 100%;

        margin-top: 0.25rem;
    }

    &__icon-badge {
        display: inline-flex;
        justify-content: center;
        align-items: center;

        padding: 3px;
        border-radius: theme('spacing.2');

        font-size: theme('fontSize.xxs');
        line-height: 1;

        position: absolute;
        right: -0.75rem;
        top: 1rem;
    }

    &__icon-badge--with-text {
        height: theme('spacing.4');
        min-width: theme('spacing.4');
        transform: translate(50%, -50%);
    }
}

@screen lg {
    .aw-icon-menu-item {
        margin-bottom: 0.5rem;

        &:last-of-type {
            margin-bottom: 0;
        }

        &--active {
            &:before {
                border-radius: 0.625rem;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 4rem;
                height: 3.0625rem;
                content: '';
                background-color: var(--c-mono-800);
            }
        }

        &__icon {
            &-block {
                padding: 0.515625rem 0.5rem;
                width: 4rem;
            }
        }

        &__icon-badge {
             right: 0.5rem;
             top: 0.5rem;
        }
    }
}

.aw-icon-menu-item-tooltip.aw-tooltip[data-visible] {
    z-index: 21;
}