/**
 * Fluid Framework - Chip / Filter Tag Component
 * @layer components
 *
 * Dismissable tags for active filters, selections, and removable items.
 *
 * Usage:
 *   <span class="chip">
 *     <span class="chip__label">Color: Blue</span>
 *     <button class="chip__remove" aria-label="Remove Color: Blue filter">&times;</button>
 *   </span>
 *
 *   <!-- Non-dismissable (no remove button) -->
 *   <span class="chip">
 *     <span class="chip__label">Category</span>
 *   </span>
 *
 *   <!-- Active filter bar -->
 *   <div class="chip-group">
 *     <span class="chip">...</span>
 *     <span class="chip">...</span>
 *     <button class="chip-group__clear" data-variant="ghost" data-size="sm">Clear All</button>
 *   </div>
 *
 *   <!-- Selectable chip: a checkbox or radio inside the label. The chip shows
 *        the checked state, wraps a long label and is 44px tall for a thumb. -->
 *   <label class="chip"><input type="checkbox" name="cuisine" value="Mexican"> Mexican</label>
 *   <label class="chip"><input type="radio" name="size" value="m"> Medium</label>
 *
 * Variants: data-variant="filled|outline"
 */

@layer components {
  .chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-sm);
    line-height: var(--leading-tight);
    color: var(--color-text);
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-pill);
    white-space: nowrap;
    transition: background-color var(--duration-fast) var(--ease-fluid);
  }

  .chip:hover {
    background: var(--color-surface-raised);
  }

  .chip__label {
    padding-inline-end: var(--space-1);
  }

  .chip__remove {
    --_btn-bg: transparent;
    --_btn-bg-hover: var(--color-error-subtle);

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    padding: 0;
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    line-height: 1;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-fluid),
                background-color var(--duration-fast) var(--ease-fluid);
  }

  .chip__remove:hover {
    color: var(--color-error);
    background: var(--color-error-subtle);
  }

  .chip__remove:focus-visible {
    color: var(--color-error);
    outline: var(--focus-ring-width) solid var(--color-focus);
    outline-offset: 1px;
  }

  /* Extend touch target to 44px minimum */
  .chip__remove::before {
    content: "";
    position: absolute;
    inset: -0.75rem;
  }


  /* ========================================
     VARIANTS
     ======================================== */

  .chip[data-variant="filled"] {
    background: var(--accent-subtle);
    border-color: transparent;
    color: var(--accent-ink);
  }

  .chip[data-variant="filled"]:hover {
    background: var(--accent);
    color: var(--on-accent);
  }

  .chip[data-variant="filled"]:hover .chip__remove:hover {
    color: var(--on-accent);
    background: oklch(from var(--accent) calc(l - 0.1) c h);
  }

  .chip[data-variant="outline"] {
    background: transparent;
  }


  /* ========================================
     SELECTABLE CHIP
     <label class="chip"><input type="checkbox"> Text</label>
     ======================================== */

  .chip:has(> input:is([type="checkbox"], [type="radio"])) {
    min-block-size: 2.75rem;
    padding-block: var(--space-2);
    white-space: normal;
    cursor: pointer;
    transition:
      background-color var(--duration-fast) var(--ease-fluid),
      border-color var(--duration-fast) var(--ease-fluid);
  }

  /* Tint and border only: the ticked box already says checked. */
  .chip:has(> input:checked) {
    background: var(--accent-subtle);
    border-color: var(--accent);
  }

  .chip:has(> input:focus-visible) {
    outline: var(--focus-ring-width) solid var(--color-focus);
    outline-offset: 2px;
  }

  .chip:has(> input:disabled) {
    opacity: 0.6;
    cursor: not-allowed;
  }


  /* ========================================
     CHIP GROUP
     Container for active filter chips
     ======================================== */

  .chip-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
  }

  .chip-group__clear {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
  }



  /* ========================================
     REDUCED MOTION
     ======================================== */

  /* Reduced motion: the reset shortens every transition. */
}