@import url("https://esm.sh/tom-select@2.4.3/dist/css/tom-select.min.css");

@layer components {

  .ts-control {
    align-items: center;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--rounded-md);
    color: var(--color-text);
    display: inline-flex;
    font-size: var(--text-sm);
    line-height: inherit;
    min-block-size: var(--size-9);
    padding: var(--size-1_5) var(--size-3);

    >input {
      color: inherit;
      font-size: inherit;
    }
  }

  .ts-dropdown {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--rounded-md);
    box-shadow: var(--shadow-md);
    color: var(--color-text);
    font-size: var(--text-sm);
    line-height: inherit;

    /* Setup transition */
    transition-behavior: allow-discrete;
    transition-duration: var(--time-150);
    transition-property: display, opacity, transform;

    /* Exit stage to */
    opacity: 0;
    transform: var(--scale-95);

    /* On stage */
    .dropdown-active & {
      opacity: 1;
      transform: var(--scale-100);
    }

    /* Enter stage from */
    @starting-style {
      .dropdown-active & {
        opacity: 0;
        transform: var(--scale-95);
      }
    }

    .ts-dropdown-content:not(:has(.optgroup)) {
      padding: var(--size-1);
    }

    .optgroup:not(:first-child) {
      border-block-start-width: var(--border);
    }

    .optgroup {
      padding: var(--size-1);
    }

    .optgroup-header {
      background-color: inherit;
      color: var(--color-text-subtle);
      font-size: var(--text-xs);
      padding: var(--size-1_5) var(--size-2);
    }

    .create {
      padding: var(--size-1_5) var(--size-2);
    }

    .option {
      border: 1px solid transparent;
      border-radius: var(--rounded-md);
      padding: var(--size-1_5) var(--size-2);
    }

    .active {
      background-color: var(--color-border-light);
      color: inherit !important;
    }

    .highlight {
      background-color: transparent !important;
    }

    .spinner {
      margin: var(--size-1_5) 0 0;
    }

    .spinner::after {
      border-block-color: var(--color-border-dark);
    }
  }

  .ts-wrapper.single .ts-control {
    background-color: var(--color-surface) !important;
    background-image: url("/assets/chevron-down-zinc-500-e6dc6029.svg") !important;
    background-position: center right var(--size-2) !important;
    background-repeat: no-repeat !important;
    background-size: var(--size-4) auto !important;
  }

  .ts-wrapper.multi .ts-control>.item {
    background: var(--color-border-light);
    border-radius: var(--rounded-md);
    color: inherit;
    line-height: var(--leading-tight);
  }

  .disabled .ts-control {
    opacity: var(--opacity-50);
  }

  .disabled .ts-control * {
    cursor: not-allowed !important;
  }

  .invalid .ts-control {
    border-color: var(--color-negative);
  }

  [data-controller~="combobox"] {
    clip: rect(0 0 0 0);
    position: absolute;
  }
}