@import url("https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/css/tom-select.min.css") layer(vendor);

@layer components {
  /* Tom-Select Overrides
     ========================================================================== */
  /* Style tom-select controls to match our form inputs */

  .tom-select .ts-control {
    display: flex !important;
    align-items: center;
    inline-size: 100%;
    padding: var(--space-xxs) var(--space-xs) !important;
    border: var(--border) !important;
    border-radius: var(--border-radius) !important;
    outline: none !important;
    transition:
      box-shadow 250ms,
      border-color 250ms !important;
    background-color: var(--color-bg) !important;
    min-height: 2.5rem !important;
  }

  /* Focus state matching form inputs */
  .tom-select.focus .ts-control,
  .tom-select .ts-control:focus {
    box-shadow: 0 0 0 2px var(--color-blue-bright) !important;
    border-color: color-mix(
      in oklch,
      var(--color-blue-bright),
      transparent 50%
    ) !important;
  }

  /* Dropdown styling */
  .tom-select .ts-dropdown {
    border: var(--border) !important;
    border-radius: var(--border-radius) !important;
    box-shadow: var(--shadow-small) !important;
    background-color: var(--color-bg) !important;
  }

  /* Dropdown items */
  .tom-select .ts-dropdown .option {
    padding: var(--space-xxs) var(--space-xs) !important;
    transition: background-color 150ms !important;
  }

  .tom-select .ts-dropdown .option:hover,
  .tom-select .ts-dropdown .option.active {
    background-color: color-mix(
      in oklch,
      var(--color-blue-bright),
      transparent 90%
    ) !important;
  }

  .tom-select .ts-dropdown .option.selected {
    background-color: color-mix(
      in oklch,
      var(--color-blue-bright),
      transparent 80%
    ) !important;
    color: var(--color-ink) !important;
  }

  /* Multi-select items (pills) */
  .tom-select .ts-control .item {
    padding: 0.125rem 0.375rem !important;
    margin: 0.125rem !important;
    border-radius: calc(var(--border-radius) / 2) !important;
    background-color: color-mix(
      in oklch,
      var(--color-blue-bright),
      transparent 80%
    ) !important;
    border: 1px solid color-mix(in oklch, var(--color-blue-bright), transparent 50%) !important;
    color: var(--color-ink) !important;
  }

  /* Remove button in multi-select items */
  .tom-select .ts-control .item .remove {
    padding: 0 0.25rem !important;
    border-inline-start: 1px solid
      color-mix(in oklch, var(--color-blue-bright), transparent 50%) !important;
    margin-inline-start: 0.25rem !important;
  }

  /* Placeholder styling */
  .tom-select .ts-control input::placeholder {
    color: color-mix(in oklch, currentColor, transparent 60%) !important;
  }

  /* Disabled and locked states */
  .tom-select.disabled .ts-control,
  .tom-select.locked .ts-control {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    background-color: var(--color-gray-lightest) !important;
  }

  /* Input text color (library hardcodes #333) */
  .tom-select .ts-control,
  .tom-select .ts-control input {
    color: var(--color-ink) !important;
  }

  .tom-select .ts-dropdown .option {
    color: var(--color-ink) !important;
  }

  /* Sustainable tags: green-tint the dropdown option and the selected pill */
  .tom-select .ts-dropdown .option.sustainable {
    color: var(--color-green-dark) !important;
  }

  .tom-select .ts-control .item.sustainable {
    background-color: var(--color-green-light) !important;
    border-color: color-mix(in oklch, var(--color-green-dark), transparent 50%) !important;
    color: var(--color-green-dark) !important;
  }

  .tom-select .ts-control .item.sustainable .remove {
    border-inline-start-color: color-mix(in oklch, var(--color-green-dark), transparent 50%) !important;
  }
}