/**
 * toggle.css: Toggle (.ui-toggle), a button-styled checkbox/radio
 *
 * Same look as .ui-button (tokens default to the --ui-button-* family), but it wraps a
 * native checkbox or radio inside a <label>. State is driven from the nested input
 * via :has(): the checked state reuses the button's *active* token values, so an
 * "on" toggle reads like a pressed button.
 *
 * @layer      variables, components
 * @requires   layers.css, _variables.css, button.css
 * @uses       :has(): drive label state from the nested input (checked/focus/disabled)
 * @uses       oklch(from …): variant hover/active tints (inherited from --ui-button-*)
 * @uses       text-box: vertical trim (patchy browser support)
 * @tokens     --ui-toggle-* (@layer variables; default to the --ui-button-* family)
 * @consumedby toggle-group.css
 * @see        https://ui.shadcn.com/docs/components/base/toggle
 */

@layer variables {
  :root {
    --ui-toggle-ring-color: var(--ui-button-ring-color);

    --ui-toggle-font-family: var(--ui-button-font-family);
    --ui-toggle-font-size: var(--ui-button-font-size);
    --ui-toggle-font-weight: var(--ui-button-font-weight);
    --ui-toggle-line-height: var(--ui-button-line-height);

    --ui-toggle-background: var(--ui-button-background);
    --ui-toggle-background--hover: var(--ui-button-background--hover);
    --ui-toggle-background--active: var(--ui-button-background--active);

    --ui-toggle-background--checked: var(--primary);
    --ui-toggle-background--checked-hover: oklch(from var(--primary) l c h / 0.9);
    --ui-toggle-background--checked-active: oklch(from var(--primary) l c h / 0.8);

    --ui-toggle-foreground: var(--ui-button-foreground);
    --ui-toggle-foreground--hover: var(--ui-button-foreground--hover);
    --ui-toggle-foreground--active: var(--ui-button-foreground--active);

    --ui-toggle-foreground--checked: var(--primary-foreground);
    --ui-toggle-foreground--checked-hover: var(--primary-foreground);
    --ui-toggle-foreground--checked-active: var(--primary-foreground);

    --ui-toggle-border-width: var(--ui-button-border-width);
    --ui-toggle-border-style: var(--ui-button-border-style);
    --ui-toggle-border-color: var(--ui-button-border-color);
    --ui-toggle-border-color--hover: var(--ui-button-border-color--hover);
    --ui-toggle-border-color--active: var(--ui-button-border-color--active);

    --ui-toggle-border-color--checked: var(--primary);
    --ui-toggle-border-color--checked-hover: var(--primary);
    --ui-toggle-border-color--checked-active: var(--primary);

    --ui-toggle-gap: var(--ui-button-gap);
    --ui-toggle-padding: var(--ui-button-padding);
    --ui-toggle-block-size: var(--ui-button-block-size);
    --ui-toggle-radius: var(--ui-button-radius);

    --ui-toggle-icon-size: var(--ui-button-icon-size);

    /* composes into the toggle's box-shadow list: use a transparent shadow,
       never `none`, so the focus ring layers stay valid */
    --ui-toggle-shadow: var(--ui-button-shadow);
  }
}

@layer zazz.components {
  /* ===========================================================================
  TOGGLE

  Markup: a <label class="toggle"> wrapping a visually-hidden
  <input type="checkbox"> (or "radio") and the visible content. Clicking the
  label flips the input; the input stays keyboard-focusable so :focus-visible
  still drives the ring.
  =========================================================================== */

  .ui-toggle {
    font-family: var(--ui-toggle-font-family);
    font-size: var(--ui-toggle-font-size);
    font-weight: var(--ui-toggle-font-weight);
    line-height: var(--ui-toggle-line-height);

    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: var(--ui-toggle-gap);
    flex-shrink: 0;

    min-block-size: var(--ui-toggle-block-size);
    min-inline-size: max-content;
    padding-inline: var(--ui-toggle-padding);

    border: var(--ui-toggle-border-width) var(--ui-toggle-border-style)
      var(--ui-toggle-border-color);
    border-radius: var(--ui-toggle-radius);

    color: var(--ui-toggle-foreground);
    background-color: var(--ui-toggle-background);

    /* ring renders as box-shadow so it composes with --ui-toggle-shadow; the
       ring widths animate from 0 so the ring grows in smoothly on focus */
    --_ring-offset-width: 0px;
    --_ring-width: 0px;
    --_ring: color-mix(in oklch, var(--ui-toggle-ring-color) var(--ring-opacity), transparent);
    box-shadow:
      0 0 0 var(--_ring-offset-width) var(--ring-offset-color),
      0 0 0 calc(var(--_ring-offset-width) + var(--_ring-width)) var(--_ring, var(--ring)),
      var(--ui-toggle-shadow);

    cursor: pointer;
    text-decoration: none;

    /* transparent twin of the ring for forced-colors / high-contrast modes */
    outline: var(--outline-width) var(--outline-style) transparent;
    outline-offset: var(--outline-offset);

    transition: var(--default-transition);

    user-select: none;
    text-box: trim-both ex alphabetic;
  }

  /* visually hidden but still in the tab order and focusable */
  .ui-toggle > input[type="checkbox"],
  .ui-toggle > input[type="radio"] {
    position: absolute;
    clip-path: inset(50%);
    opacity: 0;
    pointer-events: none;
  }

  /* ===========================================================================
  TOGGLE STATES
  =========================================================================== */

  .ui-toggle:hover:not(:has(> input:disabled)) {
    color: var(--ui-toggle-foreground--hover);
    background-color: var(--ui-toggle-background--hover);
    border-color: var(--ui-toggle-border-color--hover);
  }

  .ui-toggle:active:not(:has(> input:disabled)) {
    color: var(--ui-toggle-foreground--active);
    background-color: var(--ui-toggle-background--active);
    border-color: var(--ui-toggle-border-color--active);
  }

  /* the "on" state reuses the button's active look */
  .ui-toggle:has(> input:checked) {
    color: var(--ui-toggle-foreground--checked);
    background-color: var(--ui-toggle-background--checked);
    border-color: var(--ui-toggle-border-color--checked);
  }

  .ui-toggle:has(> input:checked:hover) {
    color: var(--ui-toggle-foreground--checked-hover);
    background-color: var(--ui-toggle-background--checked-hover);
    border-color: var(--ui-toggle-border-color--checked-hover);
  }

  .ui-toggle:has(> input:checked:active) {
    color: var(--ui-toggle-foreground--checked-active);
    background-color: var(--ui-toggle-background--checked-active);
    border-color: var(--ui-toggle-border-color--checked-active);
  }

  .ui-toggle:has(> input:focus-visible) {
    --_ring-offset-width: var(--ring-offset-width);
    --_ring-width: var(--ring-width);

    outline-color: transparent;
  }

  .ui-toggle:has(> input:disabled) {
    --ui-toggle-foreground: var(--muted-foreground);
    --ui-toggle-background: var(--muted);
    --ui-toggle-shadow: 0 0 transparent;

    cursor: default;
    opacity: 0.5;
    outline: none;
  }

  /* ===========================================================================
  TOGGLE ICONS
  =========================================================================== */

  .ui-toggle > svg {
    inline-size: var(--ui-toggle-icon-size);
    block-size: var(--ui-toggle-icon-size);
    pointer-events: none;
    justify-content: center;
    align-items: center;
    display: flex;
    padding: 0;
  }

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

  .ui-toggle[data-variant="primary"] {
    --ui-toggle-background: var(--primary);
    --ui-toggle-background--hover: oklch(from var(--primary) l c h / 0.9);
    --ui-toggle-background--active: oklch(from var(--primary) l c h / 0.8);

    --ui-toggle-foreground: var(--primary-foreground);
    --ui-toggle-foreground--hover: var(--primary-foreground);
    --ui-toggle-foreground--active: var(--primary-foreground);

    --ui-toggle-border-color: transparent;
    --ui-toggle-border-color--hover: transparent;
    --ui-toggle-border-color--active: transparent;

    --ui-toggle-shadow: 0 0 transparent;
  }

  .ui-toggle[data-variant="muted"] {
    --ui-toggle-background: var(--muted);
    --ui-toggle-background--hover: oklch(from var(--muted) l c h / calc(alpha - 0.02));
    --ui-toggle-background--active: var(--muted);

    --ui-toggle-foreground: var(--foreground);
    --ui-toggle-foreground--hover: var(--foreground);
    --ui-toggle-foreground--active: var(--foreground);

    --ui-toggle-border-color: transparent;
    --ui-toggle-border-color--hover: transparent;
    --ui-toggle-border-color--active: transparent;

    --ui-toggle-shadow: 0 0 transparent;
  }

  /* the default "ghost" toggle reads as bare until on/hovered (the shadcn look) */
  .ui-toggle[data-variant="ghost"] {
    --ui-toggle-background: transparent;
    --ui-toggle-background--hover: var(--muted);
    --ui-toggle-background--active: oklch(from var(--muted) l c h / calc(alpha - 0.02));

    --ui-toggle-foreground: var(--foreground);
    --ui-toggle-foreground--hover: var(--foreground);
    --ui-toggle-foreground--active: var(--foreground);

    --ui-toggle-border-color: transparent;
    --ui-toggle-border-color--hover: transparent;
    --ui-toggle-border-color--active: transparent;

    --ui-toggle-shadow: 0 0 transparent;
  }

  .ui-toggle[data-variant="destructive"] {
    --ui-toggle-ring-color: var(--destructive);

    --ui-toggle-background: var(--destructive);
    --ui-toggle-background--hover: oklch(from var(--destructive) l c h / 0.9);
    --ui-toggle-background--active: oklch(from var(--destructive) l c h / 0.8);

    --ui-toggle-foreground: var(--destructive-foreground);
    --ui-toggle-foreground--hover: var(--destructive-foreground);
    --ui-toggle-foreground--active: var(--destructive-foreground);

    --ui-toggle-border-color: var(--destructive);
    --ui-toggle-border-color--hover: var(--destructive);
    --ui-toggle-border-color--active: var(--destructive);

    --ui-toggle-shadow: 0 0 transparent;
  }

  /* ===========================================================================
  TOGGLE SIZES
  =========================================================================== */

  .ui-toggle[data-size="sm"] {
    --ui-toggle-block-size: var(--step-6);
    --ui-toggle-padding: var(--step-2);
    --ui-toggle-radius: var(--radius-sm);
  }

  .ui-toggle[data-size="icon"] {
    block-size: var(--ui-toggle-block-size);
    inline-size: var(--ui-toggle-block-size);
    padding: 0;
    aspect-ratio: 1 / 1;
  }

  .ui-toggle[data-size="icon-sm"] {
    --ui-toggle-block-size: var(--step-6);
    --ui-toggle-padding: var(--step-2);
    --ui-toggle-radius: var(--radius-sm);
    --ui-toggle-icon-size: var(--step-3_5);

    block-size: var(--ui-toggle-block-size);
    inline-size: var(--ui-toggle-block-size);
    padding: 0;
    aspect-ratio: 1 / 1;
  }
}