@import url("/assets/tom-select.min-d0368888.css") layer(vendor);

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

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

  /* Focus state matching form inputs */
  .tom-select.focus .ts-control,
  .tom-select .ts-control:focus {
    box-shadow: var(--input-focus-ring);
    border-color: var(--input-focus-border-color);
  }

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

  /* Dropdown items */
  .tom-select .ts-dropdown .option {
    padding: var(--block-space-three-eighths) var(--block-space-half);
    transition: background-color 150ms;
  }

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

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

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

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

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

  /* Disabled state */
  .tom-select.disabled .ts-control {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: var(--color-gray-lightest);
  }

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

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

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

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

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