@import 'commons';

.m-menu-item {
    position: relative;

    &.m--is-selected {
        --m-menu--font-weight: var(--m-menu--selected-font-weight);

        &:not(.m--is-group) {
            --m-menu--color: var(--m-menu--selected-color);
            --m-menu--indicator: var(--m-menu--selected-indicator);

            stroke-width: 1.5px;
        }
    }

    &.m--is-inside-group {
        --m-menu--color: var(--m-menu--group-color);
        --m-menu--border: var(--m-menu--group-border);
        --m-menu--item-background-color: var(--m-menu--group-background-color);
        --m-menu--text-transform: var(--m-menu--group-text-transform);
        --m-menu--font-weight: var(--m-menu--group-font-weight);
        --m-menu--indicator: var(--m-menu--group-indicator);
        --m-menu--hover-indicator-color: var(--m-menu--group-hover-indicator-color);

        &.m--is-selected {
            --m-menu--indicator: var(--m-menu--group-selected-indicator);
            --m-menu--font-weight: var(--m-menu--group-selected-font-weight);
        }
    }

    &__link.m-menu-item__link {
        // must double specificity to compensate the stupid issue with mu-app-root
        transition: color $m-transition-duration ease, font-weight $m-transition-duration ease, border-color $m-transition-duration ease;
        position: relative;
        display: flex;
        align-items: center;
        gap: $m-space-xs;
        text-decoration: none;
        color: var(--m-menu--color);
        padding: var(--m-menu--padding);
        min-height: var(--m-menu--min-height);
        border-top: var(--m-menu--border);
        font-weight: var(--m-menu--font-weight);
        text-transform: var(--m-menu--text-transform);
        background-color: var(--m-menu--item-background-color);
        border-left: $m-border-width-lg solid var(--m-menu--indicator);
        outline-color: var(--m-color-grey-black);
    }

    &:not(.m--is-selected) {
        .m-menu-item__link {
            &:not(.m--is-disabled) {

                &:hover,
                &:focus {
                    --m-menu--color: var(--m-menu--hover-color);
                    border-color: var(--m-menu--hover-indicator-color);
                }

            }
        }
    }

    &__icon {
        @include m-font-size('lg');
        stroke-width: inherit;
    }

    &__label {
        flex: 1 1 auto;
    }

    &__group {
        padding: 0;
        margin: 0;
        list-style: none;
    }
}