/* stylelint-disable selector-class-pattern, scss/no-global-function-names */

@import 'vue-select/src/scss/vue-select';

.v-select {
    padding: 0 $input-padding-horizontal;
    border: $input-border-size solid $bg-color-input-normal;
    border-radius: $input-border-radius;
    background-color: $bg-color-input-normal;
    font-size: $input-font-size;
}

.vs {
    $block: &;

    &__dropdown-toggle {
        min-height: 35px;
        padding: 0;
        border: none;
    }

    &__dropdown-menu {
        left: -1px;
        width: calc(100% + 2px);
        border: $input-border-size solid $bg-color-button-info;
        border-top: none;
        border-radius: 0 0 4px 4px;
        background: $bg-color-input-normal;
    }

    &__dropdown-option {
        padding: 0.4rem 0.9rem;
        color: $color-input;

        &--highlight {
            background: $bg-color-button-info;
            color: $color-input;
        }
    }

    &__selected-options {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        padding: 0 2px;

        #{$block}__selected {
            display: inline-flex;
            align-items: baseline;
            margin: 0 3px 0 0;
            padding: 0.3rem 0.7rem;
            border: none;
            background-color: $bg-color-tooltip;
            color: $color-input;
            line-height: normal;
        }

        #{$block}__deselect {
            padding: 0.3rem 0.4rem;
            background: none;

            svg {
                fill: $text-light-color;
            }

            &:hover {
                background-color: $bg-color-button-default;

                svg {
                    fill: $text-nav-color;
                }
            }
        }
    }

    &__search,
    &__search:focus {
        margin: 0;
        padding: $input-padding-vertical 0;
        border: none;
        font-size: $input-font-size;
        line-height: normal;

        &::placeholder {
            color: $text-light-color;
        }
    }

    &__actions {
        padding: 0;

        #{$block}__clear {
            margin: 0 0.6rem 0 0;
            padding: 0.6rem;

            // - Important, pour surcharger la règle `.button:not(.Button)`
            // stylelint-disable-next-line declaration-no-important
            background: none !important;
            fill: $bg-color-button-danger;
            cursor: pointer;

            &:focus,
            &:hover {
                background: none;
                fill: adjust-color($bg-color-button-danger, $lightness: 10%);
            }
        }

        #{$block}__open-indicator {
            fill: $text-nav-color;
            cursor: pointer;
        }
    }

    &--open {
        border-color: $bg-color-button-info;
    }

    &--single {
        #{$block}__selected {
            margin: 0;
            padding: 0;
            background: none;
        }

        &#{$block}--open {
            #{$block}__selected {
                display: none;
            }
        }
    }
}
