.select2-container--default {
  .select2-selection--single,
  .select2-selection--multiple {
    @apply border-slate-300;
  }
}

.select2-selection.select2-selection--single,
.select2-selection.select2-selection--multiple {
  min-height: 37px;
  .select2-selection__rendered {
    padding-left: 12px;
    min-height: 34px;
    line-height: 34px;
  }
  .select2-selection__arrow {
    padding-top: 35px;
  }
}

.select2-container .select2-search--inline .select2-search__field {
  font-weight: 300;
  margin-top: 6px;
  @apply text-base md:text-sm;
}

.select2 {
  display: block;
  img {
    display: none;
  }
}

.select2-results {
  img {
    height: 30px;
    width: 30px;
    border-radius: 15px;
    margin-right: 8px;
  }
}

.select2-results__option--highlighted {
  @apply bg-primary-400 !important;
}

@layer components {
  .select2-container {
    @apply w-full;
  }

  .select2-border {
    @apply border-primary-500 !important;
    box-shadow: inset 0 0 0 1px var(--primary-500) !important;
    outline: 0 !important;
  }

  .select2-selection--single,
  .select2-selection--multiple {
    height: 38px !important;
  }

  .select2-selection--single, .select2-selection--multiple {
    @apply border-slate-300;
    @apply rounded-md shadow-sm pt-0 focus:ring-primary-500 !important;

    &.focus-visible {
      @extend .select2-border;
    }

    &:focus {
      outline: 0 !important;
    }

    .select2-selection__arrow {
      height: 34px !important;
    }

    .select2-selection__rendered {
      @apply text-slate-500 pl-3 !important;
      line-height: 35px !important;
    }
  }

  .select2-selection--multiple .select2-selection__choice {
    margin-top: 6px !important;
    line-height: 22px !important;
  }

  .select2-container--open, .select2-container--focus {
    .select2-selection--single, .select2-selection--multiple {
      @extend .select2-border;
    }
  }

  .select2-container--default.select2-container--disabled .select2-selection--single,
  .select2-container--default.select2-container--disabled .select2-selection--multiple{
    @apply bg-slate-200 dark:bg-slate-700 hover:bg-slate-200 hover:dark:bg-slate-700
  }

  .select2-container .select2-dropdown {
    @apply border-2 border-slate-300 shadow-sm overflow-hidden !important;
    @apply border-primary-500 !important;
  }

  .select2-container--default .select2-results__option[aria-selected=true] {
    @apply text-white bg-primary-500 !important;
  }

  .select2-search__field {
    @apply rounded-md;
    @apply border-slate-300 !important;

    &:focus {
      border-color: #5897fb !important;
    }
  }
}