@layer components {
  .select {
    @apply h-10 w-full rounded-primary border border-slate-300 bg-transparent px-4 text-sm text-slate-700 focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:bg-slate-100 disabled:text-slate-500 disabled:opacity-80 dark:border-slate-600 dark:bg-transparent dark:text-slate-400 dark:focus:border-primary-500 dark:disabled:bg-slate-700;

    & > option {
      @apply bg-white text-slate-700 dark:bg-dark-700 dark:text-dark-200;
    }

    & > option[disabled] {
      @apply bg-slate-100 text-slate-400 dark:bg-slate-700 dark:text-slate-500;
    }

    &-sm {
      @apply h-[1.875rem] text-xs;
    }

    &-md {
      @apply h-[2.325rem] text-sm;
    }

    &-lg {
      @apply h-[3.075rem] text-base;
    }

    &.is-valid,
    .form-validated &:valid {
      @apply border-success-500  focus:border-success-500 focus:ring-success-500 dark:border-success-500 dark:focus:border-success-500;
    }

    &.is-valid ~ .success-message,
    .form-validated &:valid ~ .success-message {
      @apply block;
    }

    &.is-invalid,
    .form-validated &:invalid {
      @apply border-danger-500  focus:border-danger-500 focus:ring-danger-500 dark:border-danger-500 dark:focus:border-danger-500;
    }

    &.is-invalid ~ .error-message,
    .form-validated &:invalid ~ .error-message {
      @apply block;
    }
  }

  select.tom-select {
    //Prevent multiple scrollbar appearing in chrome using custom utility.
    @apply zero-sr-only;
  }

  .tom-select {
    &.ts-wrapper.single.input-active .ts-control,
    &.ts-wrapper.multi.input-active .ts-control,
    .ts-control {
      @apply w-full border border-slate-300 bg-transparent dark:border-slate-600 dark:bg-transparent;
    }

    &.ts-wrapper.input-active .ts-control {
      outline: 0 !important;
    }

    &.ts-wrapper.multi.has-items .ts-control {
      @apply py-1;
    }

    & > .ts-control {
      @apply flex min-h-[2.5rem] w-full items-center gap-1 rounded-primary px-4 py-0 text-slate-700 after:absolute after:bottom-0 after:right-2 after:top-0 after:m-auto after:inline-flex after:h-4 after:w-4 after:items-center after:justify-center after:font-['tabler-icons'] after:text-base after:text-slate-500 after:content-['\ea5f'] dark:text-slate-300 after:dark:text-slate-400/60;

      .items-placeholder {
        @apply placeholder:text-sm;
      }
    }

    & > .ts-control > input {
      @apply bg-red-300 placeholder:text-sm placeholder:text-slate-400;
    }

    &.ts-wrapper.single > .ts-control > .item {
      @apply text-sm;
    }

    &.ts-wrapper.multi > .ts-control > .item {
      @apply rounded-full bg-primary-100 px-[0.5rem] text-xs text-primary-500 dark:bg-primary-500/10 dark:text-primary-500;

      &:not(:last-child) {
        @apply m-0;
      }
    }

    & > .ts-dropdown {
      @apply w-full rounded-primary border border-slate-300 bg-white p-2 dark:border-slate-600 dark:bg-slate-800;

      .dropdown-input-wrap > input {
        @apply rounded border border-slate-300 text-sm text-slate-700 placeholder:text-slate-400 focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus-visible:outline-none dark:text-slate-300;
      }

      & > .ts-dropdown-content {
        @apply mt-2;

        & > .optgroup > .optgroup-header {
          @apply mb-2 bg-transparent text-sm font-semibold text-slate-500 dark:text-slate-400;
        }

        & > .option,
        & > .optgroup > .option {
          @apply rounded p-2 text-sm text-slate-500 dark:text-slate-400;

          &:not(:last-child) {
            @apply mb-1;
          }

          &.active {
            @apply bg-primary-100 text-primary-500 dark:bg-primary-500/10;
          }

          &.selected {
            @apply bg-primary-500 text-white dark:bg-primary-500 dark:text-white;
          }
        }

        & > .no-results {
          @apply text-sm text-slate-500 dark:text-slate-400;
        }
      }
    }

    &.ts-wrapper.single > .ts-control > .item {
      @apply text-sm;
    }

    &.ts-wrapper.multi > .ts-control > .item {
      @apply text-sm;
    }

    .ts-dropdown .dropdown-input-wrap > input {
      @apply placeholder:text-sm;
    }

    .plugin-dropdown_input .dropdown-input {
      @apply py-2;
    }

    // Tom Select Sizes
    &-sm {
      .ts-control {
        @apply min-h-[1.875rem];

        .items-placeholder {
          @apply placeholder:text-xs;
        }
      }

      &.ts-wrapper.single > .ts-control > .item {
        @apply text-xs;
      }

      &.ts-wrapper.multi > .ts-control > .item {
        @apply text-xs;
      }

      .ts-dropdown {
        .dropdown-input-wrap > input {
          @apply placeholder:text-xs;
        }

        .ts-dropdown-content > .option {
          @apply py-1 text-xs;
        }
      }

      .plugin-dropdown_input .dropdown-input {
        @apply py-1.5;
      }
    }

    &-md {
      .ts-control {
        @apply min-h-[2.325rem];

        .items-placeholder {
          @apply placeholder:text-sm;
        }
      }

      &.ts-wrapper.single > .ts-control > .item {
        @apply text-sm;
      }

      &.ts-wrapper.multi > .ts-control > .item {
        @apply text-sm;
      }

      .ts-dropdown .dropdown-input-wrap > input {
        @apply placeholder:text-sm;
      }

      .plugin-dropdown_input .dropdown-input {
        @apply py-2;
      }
    }

    &-lg {
      .ts-control {
        @apply min-h-[3.075rem];

        .items-placeholder {
          @apply placeholder:text-base;
        }
      }

      &.ts-wrapper.single > .ts-control > .item {
        @apply text-base;
      }

      &.ts-wrapper.multi > .ts-control > .item {
        @apply text-base;
      }

      .ts-dropdown .dropdown-input-wrap > input {
        @apply placeholder:text-base;
      }

      .plugin-dropdown_input .dropdown-input {
        @apply py-2.5;
      }
    }
  }
}
