@import "commons";

.m-select {
    display: inline-flex;
    flex-direction: column;

    &:focus {
        outline: none;
    }

    &:not(.m--is-disabled):not(.m--is-readonly) {
        .m-select__arrow {
            cursor: pointer;
        }
    }

    &__clear-button {
        margin-right: $m-space-sm;
    }

    &__arrow {
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: left;
        color: $m-color-grey;

        &-icon {
            transition: transform $m-transition-duration ease, color $m-transition-duration ease !important;
        }

        &.m--is-open,
        &.m--is-focus {
            .m-select__arrow-icon {
                color: $m-color-interactive;
            }
        }

        &.m--is-open {
            .m-select__arrow-icon {
                transform: rotate(-180deg);
            }
        }
    }

    &.m--is-disabled,
    &.m--is-readonly {
        .m-select__arrow {
            cursor: default;
        }

        .m-select__arrow-icon {
            color: $m-input-style--color-disabled;
        }
    }

    &__validation-message {
        transition: margin-top $m-transition-duration ease;

        &.m--has-validation-message {
            margin-top: $m-space-2xs;
        }
    }

    &__input {
        outline: none;
    }

    &__hidden-label {
        @include m-visually-hidden();
    }
}