/**
 * badge.css: Badge (.ui-badge)
 *
 * @layer      variables, components
 * @requires   layers.css, _variables.css, _reset.css, fields.css (--ui-field-* border/ring)
 * @uses       color-mix(), oklch(from …): variant hover/active tints
 * @uses       text-box: vertical trim (patchy browser support)
 * @tokens     --ui-badge-* (@layer variables)
 * @consumedby combobox.css (selection tags)
 */

@layer variables {
  :root {
    /* Border + ring default to the shared --ui-field-* family (owned in fields.css)
       so a badge sitting beside fields and buttons reads as one family; metrics stay
       independent — a badge is deliberately a smaller scale. */
    --ui-badge-ring-color: var(--ui-field-ring-color);

    --ui-badge-font-family: var(--font-family-body);
    --ui-badge-font-size: var(--font-size-xs);
    --ui-badge-font-weight: var(--font-weight-strong);
    --ui-badge-line-height: 1;

    --ui-badge-background: var(--background);
    --ui-badge-background--hover: var(--muted);
    --ui-badge-background--active: oklch(from var(--muted) l c h / calc(alpha - 0.02));

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

    --ui-badge-border-width: var(--ui-field-border-width);
    --ui-badge-border-style: var(--ui-field-border-style);
    --ui-badge-border-color: var(--ui-field-border-color);
    --ui-badge-border-color--hover: var(--ui-field-border-color);
    --ui-badge-border-color--active: var(--ui-field-border-color);

    --ui-badge-gap: var(--step-1);
    --ui-badge-padding: var(--step-1_5);
    --ui-badge-block-size: var(--step-5_5);
    --ui-badge-radius: var(--radius-sm);

    --ui-badge-icon-size: var(--step-3);

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

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

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

    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ui-badge-gap);
    flex-shrink: 0;

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

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

    color: var(--ui-badge-foreground);
    background-color: var(--ui-badge-background);
    background-clip: padding-box;

    /* ring renders as box-shadow so it composes with --ui-badge-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-badge-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-badge-shadow);

    cursor: default;
    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;
  }

  a[href] .ui-badge:not(:disabled, [aria-disabled="true"]),
  a[href].ui-badge:not(:disabled, [aria-disabled="true"]) {
    cursor: pointer;
  }

  /* ===========================================================================
  BADGE STATES
  =========================================================================== */

  button.ui-badge:hover:not(:disabled, [aria-disabled="true"]),
  a[href].ui-badge:hover:not(:disabled, [aria-disabled="true"]) {
    color: var(--ui-badge-foreground--hover);
    background-color: var(--ui-badge-background--hover);
    border-color: var(--ui-badge-border-color--hover);
  }

  button.ui-badge:active:not(:disabled, [aria-disabled="true"]),
  a[href].ui-badge:active:not(:disabled, [aria-disabled="true"]) {
    color: var(--ui-badge-foreground--active);
    background-color: var(--ui-badge-background--active);
    border-color: var(--ui-badge-border-color--active);
  }

  button.ui-badge:focus-visible:hover:not(:disabled, [aria-disabled="true"]),
  a[href].ui-badge:focus-visible:hover:not(:disabled, [aria-disabled="true"]) {
    --_ring-offset-width: var(--ring-offset-width);
    --_ring-width: var(--ring-width);

    outline-color: transparent;
  }

  :is(button.ui-badge:disabled, a[href].ui-badge:disabled),
  :is(button.ui-badge[aria-disabled="true"], a[href].ui-badge[aria-disabled="true"]) {
    --ui-badge-foreground: var(--muted-foreground);
    --ui-badge-background: var(--muted);
    --ui-badge-shadow: 0 0 transparent;

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

  button.ui-badge[aria-busy="true"],
  a[href].ui-badge[aria-busy="true"] {
    cursor: progress;
  }

  /* ===========================================================================
  BADGE ICONS
  =========================================================================== */

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

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

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

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

    --ui-badge-border-color: var(--ui-badge-background);
    --ui-badge-border-color--hover: var(--ui-badge-background--hover);
    --ui-badge-border-color--active: var(--ui-badge-background--active);
  }

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

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

    --ui-badge-border-color: var(--ui-badge-background);
    --ui-badge-border-color--hover: var(--ui-badge-background--hover);
    --ui-badge-border-color--active: var(--ui-badge-background--active);
  }

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

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

    --ui-badge-border-color: var(--ui-badge-background);
    --ui-badge-border-color--hover: var(--ui-badge-background--hover);
    --ui-badge-border-color--active: var(--ui-badge-background--active);
  }

  .ui-badge[data-variant="link"] {
    --ui-badge-background: transparent;
    --ui-badge-background--hover: transparent;
    --ui-badge-background--active: transparent;

    --ui-badge-foreground: var(--foreground);
    --ui-badge-foreground--hover: var(--primary);
    --ui-badge-foreground--active: oklch(from var(--primary) l c h / 0.8);

    --ui-badge-border-style: none;

    --ui-badge-block-size: fit-content;
    --ui-badge-padding: 0;
    --ui-badge-radius: 0;

    --ui-badge-shadow: 0 0 transparent;

    text-decoration-line: var(--decoration-line);
    text-decoration-style: var(--decoration-style);
    text-decoration-color: var(--decoration-color);
    text-underline-offset: var(--decoration-offset);
    text-decoration-thickness: var(--decoration-thickness);
  }

  button.ui-badge[data-variant="link"]:hover:not(:disabled, [aria-disabled="true"]),
  a[href].ui-badge[data-variant="link"]:hover:not(:disabled, [aria-disabled="true"]) {
    text-decoration-color: var(--decoration-color--hover);
    text-underline-offset: var(--decoration-offset--hover);
  }

  button.ui-badge[data-variant="link"]:active:not(:disabled, [aria-disabled="true"]),
  a[href].ui-badge[data-variant="link"]:active:not(:disabled, [aria-disabled="true"]) {
    text-decoration-color: var(--decoration-color--active);
    text-underline-offset: var(--decoration-offset--active);
  }

  /* ===========================================================================
  BADGE SIZES
  =========================================================================== */

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