/**
 * radio.css — Radio (.ui-radio, .ui-radio-group)
 *
 * @layer      variables, components
 * @requires   layers.css, _variables.css, fields.css (.ui-field-group layout, --ui-field-* surface/border)
 * @uses       appearance: none — custom circle + radial-gradient dot when :checked
 * @tokens     --ui-radio-* (@layer variables)
 */

@layer variables {
  :root {
    /* Surface + border default to the shared --ui-field-* family (owned in
       fields.css) so a radio reads as one family with the controls around it. */
    --ui-radio-size: var(--step-4_5);
    --ui-radio-background: var(--ui-field-background);
    --ui-radio-background--checked: var(--primary);
    --ui-radio-border-width: var(--ui-field-border-width);
    --ui-radio-border-style: var(--ui-field-border-style);
    --ui-radio-border-color: var(--ui-field-border-color);
    --ui-radio-border-color--hover: var(--ui-field-border-color--hover);
    --ui-radio-border-color--checked: var(--primary);
    --ui-radio-radius: var(--radius-full);
    --ui-radio-background-size: 90%;
    --ui-radio-dot-foreground: var(--primary-foreground);
    --ui-radio-dot-inner-stop: 28%;
    --ui-radio-dot-outer-stop: 30%;
    --ui-radio-dot-gradient: radial-gradient(
      circle,
      var(--ui-radio-dot-foreground) 0 var(--ui-radio-dot-inner-stop),
      transparent var(--ui-radio-dot-outer-stop)
    );
  }
}

@layer zazz.components {
  /* ===========================================================================
  RADIO — .ui-radio (+ .ui-radio-group)
  - appearance: none redraws the circle from theme tokens; the checked dot is a
    radial-gradient so it tracks --ui-radio-dot-foreground, not colour alone.
  - Group by shared `name`; wrap in a <fieldset>/<legend> or .ui-radio-group for an
    accessible labelled set.
  =========================================================================== */

  .ui-radio {
    appearance: none;
    flex-shrink: 0;
    inline-size: var(--ui-radio-size);
    block-size: var(--ui-radio-size);

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

    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--ui-radio-background-size);

    cursor: pointer;

    /* ring renders as box-shadow; transparent outline twin keeps focus visible
       in forced-colors / high-contrast modes */
    --_ring-offset-width: 0px;
    --_ring-width: 0px;
    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));
    outline: var(--outline-width) var(--outline-style) transparent;
    outline-offset: var(--outline-offset);

    transition: var(--default-transition);
  }

  .ui-radio:hover {
    border-color: var(--ui-radio-border-color--hover);
  }

  .ui-radio:focus-visible {
    --_ring-offset-width: var(--ring-offset-width);
    --_ring-width: var(--ring-width);
    outline-color: transparent;
  }

  .ui-radio:checked {
    background-color: var(--ui-radio-background--checked);
    border-color: var(--ui-radio-border-color--checked);
    background-image: var(--ui-radio-dot-gradient);
  }
}