@import 'commons';
$m-option-item--color-hover: $m-color-interactive-lightest !default;
$m-option-item--color-select: $m-color-grey-lighter !default;
$m-option-item--color-active: $m-color-grey-lightest !default;

.m-option-item {
    display: flex;
    text-decoration: none;

    &__button {
        width: 100%;
        display: flex;
        outline: none;
    }

    &__icon,
    &__text {
        display: flex;
        align-items: center;
        padding-top: $m-space;
        padding-bottom: $m-space;
    }

    &__icon {
        transition: color $m-transition-duration ease;
        padding-left: $m-space;
    }

    &__text {
        flex: 1 1 auto;
        color: $m-color-text;
        padding-right: $m-space;
        padding-left: $m-space;
    }

    &.m--is-disabled {
        cursor: default;

        .m-option-item {

            &__text,
            &__icon {
                color: $m-color-disabled;
            }
        }
    }

    &:not(.m--is-disabled) {
        .m-option-item__button {
            transition: background $m-transition-duration ease;
            cursor: pointer;

            &:hover,
            &:focus {
                background: $m-option-item--color-hover;
            }

            &:active {
                background: $m-option-item--color-active;
            }
        }
    }

    @media (max-width: $m-mq-min-sm) {
        width: 100%;
    }
}