@import '../../node_modules/vue-multiselect/dist/vue-multiselect.min.css';
@import '../variables.scss';

.multiselect {
    &__tags {
        background: var(--input-bg);
        border-color: var(--input-border-color);
        border-radius: 3px;
        color: var(--text-primary-color);
    }

    &__single {
        background: var(--input-bg);
        font-size: $app-font-base;
        line-height: 1.4;
        margin-bottom: 0;
        padding: 0;
    }

    &__select {
        height: 45px;
    }

    &__option {
        font-size: 15px;
        font-weight: 400;
        padding: 12px 2rem;

        &--highlight,
        &--highlight:after {
            background: var(--input-bg-light);
            color: var(--text-primary-color);
        }

        &.multiselect__option--selected {
            background: var(--input-bg-light);
            color: var(--text-primary-color);
            font-weight: 600;
        }
         
        &--selected,
        &--group-selected {
            &.multiselect__option--highlight,
            &.multiselect__option--highlight:after {
                background: var(--input-bg-light);
                color: var(--text-primary-color);
            }                
        }
    }

    &__input {
        background: var(--input-bg);
        border: none !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 0 !important;
        
        &::placeholder {
            color: var(--text-primary-color);
        }
    }

    &__content-wrapper {
        border-color: var(--input-border-color);
        background: var(--input-bg);
        color: var(--text-primary-color);
    }

    &--active {
        z-index: 2;
    }
}
.options-sidebar {
    label {
        &.is-invalid {
            .multiselect__tags {
                border-color: var(--warning);
            }
        }
    }
}