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

@mixin m-select-item() {
    padding: $m-space $m-space-xs;
    line-height: 20px;

    &.m--is-disabled {
        cursor: default;
        color: $m-color-disabled;
    }

    &.m--is-selected {
        background: $m-select-item--color-select;

        .m-select__list__element-text {
            cursor: default;
            background: $m-select-item--color-select;
        }
    }
}

.m-select-item {
    transition: background $m-transition-duration ease, color $m-transition-duration ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: $m-space;
    margin: 0;
    color: $m-color-text;
    font-size: inherit;
    text-decoration: none;
    outline: none;
    min-height: 52px;

    @include m-word-wrap();

    @media (min-width: $m-mq-min-sm) {
        @include m-select-item();

        &.m--is-item-active {
            cursor: pointer;

            &:hover,
            &:focus,
            &.m--is-focus {
                background: $m-select-item--color-hover;
            }

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

    @media (max-width: $m-mq-max-sm) {
        &.m--without-radio {
            @include m-select-item();
        }
    }

    &:not(.m--is-disabled).m--is-waiting {
        animation: SelectItemWaiting 0.6s infinite;
        animation-direction: alternate-reverse;
        color: $m-color-disabled;
        background: $m-color-grey-lightest;
        cursor: wait;
    }
}

@keyframes SelectItemWaiting {
    0% {
        color: $m-color-disabled;
        background: $m-color-grey-lightest;
    }

    100% {
        color: $m-color-grey-lighter;
        background: $m-color-white;
    }
}