/* One label style for state badges, language badges, and interactive tag chips. */
@layer components {
  :root {
    --ui-label-font: 700 0.68rem/1.4 "DM Sans", sans-serif;
    --ui-label-size: 1.5rem;
    --ui-label-icon-size: 0.9rem;
    --ui-fill: var(--red-050);
    --ui-selected-fill: var(--red-100);
    --ui-muted-fill: var(--warm-grey-100);
    .badge,
    .ui-chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.3rem;
      min-height: var(--ui-label-size);
      padding: 0.2rem 0.5rem;
      border: 1px solid transparent;
      border-radius: var(--control-radius);
      background: var(--ui-fill);
      color: var(--accent);
      font: var(--ui-label-font);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      white-space: nowrap;

      > .icon {
        flex: none;
        width: var(--ui-label-icon-size);
        height: var(--ui-label-icon-size);
      }
    }
    .badge.muted {
      background: var(--ui-muted-fill);
      color: var(--muted);
    }
    .ui-chip {
      border-color: var(--line);
      background: transparent;
      cursor: pointer;
      transition: background-color 120ms ease, border-color 120ms ease;

      &:hover {
        border-color: var(--accent);
        background: var(--ui-fill);
      }
      &[aria-pressed="true"],
      &[aria-current="true"] {
        border-color: transparent;
        background: var(--ui-selected-fill);
      }
      &:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
      }
      &.is-icon-only {
        width: var(--ui-label-size);
        height: var(--ui-label-size);
        padding: 0;
      }
    }


    .tag-choice {
      &:hover .ui-chip { border-color: var(--accent); background: var(--ui-fill); }
      &:has(input:checked) .ui-chip { border-color: transparent; background: var(--ui-selected-fill); }
      &:has(input:focus-visible) .ui-chip { outline: 2px solid var(--accent); outline-offset: 2px; }
    }
  }
}