@import "commons";

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

    &:focus {
        outline: none;
    }

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

    &__arrow {
        display: flex;
        cursor: pointer;
        color: $m-color-grey;

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

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

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

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

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

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

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

    &__chips {
        min-height: 24px; // Magic number
        outline: none;
    }

    &__chip {
        margin: 2px 3px 2px 0;
    }

    &__all-check {
        border-bottom: 1px solid $m-color-border;
    }

    &__more {
        white-space: nowrap;
        @include m-font-size('xs');
    }

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

    /deep/ .m-input-style__body {
        padding-top: 10px; // Magic number pour avoir la même hauteur que le m-select
        padding-bottom: 9px; // Magic number pour avoir la même hauteur que le m-select
    }
}