@import '../variables';
@import '../directives/loading';
@import './select/variables';
@import './select/component';
@import './select/animations';
@import './select/states';

@import './select/dropdown-toggle';
@import './select/open-indicator';
@import './select/clear';
@import './select/dropdown-menu';
@import './select/dropdown-option';
@import './select/selected';
@import './select/search-input';
@import './select/spinner';

[data-theme="dark"] {
  .itf-select {
    &.vs--open .form-control {
      box-shadow: 0 0 0 0.125rem $dark-input-focus-border;
      border-color: $dark-input-focus-border-color;
      background: $dark-input-focus-border-color;
    }
    &__dropdown-menu {
      background-color: $dark-body-bg;
      border-color: $dark-input-focus-border;

      .dropdown-item {
        color: $dark-body-color;

        &.active, &:active {
          background-color: $dark-primary;
          color: $dark-body-bg;
        }
      }
    }
  }
}

.itf-select {
  cursor: pointer;

  .form-control {
    padding: 0.125rem 0.75rem;

    &.is-valid, &.is-invalid {
      background-image: none;
    }
    &.is-invalid .vs__open-indicator {
      color: $danger;
    }
    &.is-valid .vs__open-indicator {
      color: $success;
    }
  }
  &.vs--multiple .form-control {
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
  }
  &.vs--open .form-control {
    //box-shadow: 0 0 0 0.125rem $input-focus-border;
    //border-color: $body-bg;
    //background: $body-bg;
  }
  &__dropdown-menu {
    background-color: $body-bg;
    //border: 2px solid $input-focus-border;
    border: 0 none;
    left: -2px;
    right: -2px;
    width: auto;
    box-shadow: rgb(9 30 66 / 25%) 0px 4px 8px -2px, rgb(9 30 66 / 31%) 0px 0px 1px;
  }
}
