/*
RadioGroup

Native radios that share a name, drawn by the theme. The group is a
role=radiogroup grid; each item is a native <input type="radio"> with a
dot indicator stacked over it.

  .radio-group[data-orientation]   vertical (column) | horizontal (row)
  .radio-group-item                item wrapper (inline-grid)
  .radio-group-item-input          the native radio
  .radio-group-indicator           the dot, pointer-events: none
  .radio-group-option              a label row for options given as data
*/

@layer components {

.radio-group {
  display:        grid;
  gap:            var(--space-3);
  min-width:      0;
}

.radio-group[data-orientation="horizontal"] {
  grid-auto-flow: column;
  justify-content: start;
  gap:            var(--space-5);
}

.radio-group-item {
  position:       relative;
  display:        inline-grid;
  flex:           none;
  width:          var(--check-size);
  height:         var(--check-size);
  vertical-align: middle;
}

.radio-group-item > * {
  grid-area: 1 / 1;
}

.radio-group-item-input {
  appearance:         none;
  -webkit-appearance: none;
  display:            block;
  width:              100%;
  height:             100%;
  margin:             0;
  border:             var(--control-border-width) solid var(--control-outline);
  border-radius:      var(--radius-full);
  background:         var(--control-bg);
  background-image:   none;
  box-shadow:         var(--control-shadow);
  cursor:             pointer;
  transition:         border-color var(--duration-fast) var(--ease-out),
                      box-shadow var(--duration-fast) var(--ease-out);
}

/* Hover sits at the family's own specificity, so a later focus, checked or
   invalid rule keeps its border while the pointer is over the control. */
.radio-group-item-input:where(:hover:not(:disabled)) {
  border-color: var(--accent);
}

.radio-group-item-input:checked {
  border-color:     var(--accent);
  background:       var(--control-bg);
  background-image: none;
}

.radio-group-item-input:focus-visible {
  outline:    none;
  box-shadow: var(--focus-ring);
}

.radio-group-indicator {
  align-self:     center;
  justify-self:   center;
  width:          50%;
  height:         50%;
  border-radius:  var(--radius-full);
  background:     var(--accent);
  pointer-events: none;
  transform:      scale(0);
  transition:     transform var(--duration-fast) var(--ease-out);
}

.radio-group-item[data-state="checked"] > .radio-group-indicator {
  transform: scale(1);
}

.radio-group-item-input:disabled {
  cursor: not-allowed;
}

/* Dimmed by the effective disabled state: its own prop, a disabled Field
   (which disables the input) or a native <fieldset disabled>. */
.radio-group-item:is([data-disabled], :has(> .radio-group-item-input:disabled)) {
  opacity: var(--opacity-disabled);
}

/* Disabled dims once: the item does it, so the input does not repeat the
   base input rule, and a label or Field that already dims the option's
   whole row leaves the item at full opacity. */
.radio-group-item-input:disabled {
  opacity: 1;
}

:is(.label:has(:disabled), .label[data-disabled], .field-label:has(:disabled), .field:is([data-disabled], fieldset:disabled .field) > :is(.field-label, .field-content)) .radio-group-item {
  opacity: 1;
}

.radio-group-item-input[aria-invalid="true"] {
  border-color: var(--danger);
}

.radio-group-item-input[aria-invalid="true"] + .radio-group-indicator {
  background: var(--danger);
}

.radio-group-item-input[aria-invalid="true"]:focus-visible {
  box-shadow: var(--focus-ring-danger);
}

.radio-group-option {
  display:     inline-flex;
  align-items: center;
  gap:         var(--space-2);
}

}