/* Single choice of the design system (/design-system/formularios#radio). The queue's distribution was the first screen to use it. */
.ds-radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-1);
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* base.css centers every legend; a form field's label starts at the edge. */
.ds-radio-group > legend {
  display: block;
  float: inline-start;
  inline-size: 100%;
  margin-inline: 0;
  padding: 0;
  text-align: start;
}

.ds-radio {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--ds-space-3);
  padding: var(--ds-space-2) var(--ds-space-3);
  border-radius: var(--ds-radius-lg);
  color: var(--ds-text);
  font-size: var(--ds-font-size-sm);
  cursor: pointer;
  transition: background-color var(--ds-duration-fast);
}

.ds-radio:hover { background: var(--ds-hover); }

.ds-radio__input {
  --hover-size: 0;
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: 0;
  opacity: 0;
}

.ds-radio__box {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  inline-size: 1.125rem;
  block-size: 1.125rem;
  margin-block-start: 0.0625rem;
  border: 1.5px solid var(--ds-text-muted);
  border-radius: var(--ds-radius-full);
  background: var(--ds-bg-pure);
  transition: background-color var(--ds-duration-fast), border-color var(--ds-duration-fast);

  &::after {
    content: "";
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: var(--ds-radius-full);
    background: var(--ds-on-cta);
    visibility: hidden;
  }
}

.ds-radio__text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-inline-size: 0;
}

.ds-radio__label { font-weight: var(--ds-weight-medium); }
.ds-radio__hint { color: var(--ds-text-secondary); font-size: var(--ds-font-size-xs); }

/* The name and a badge beside it (principal), wrapping under it when the line is short. */
.ds-radio__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-1) var(--ds-space-2); min-inline-size: 0; }

/* On a settings sheet the choices are a person's records (numbers, addresses), read at the profile list's sizes, and the
   sheet spans the form's column like the fields around it, past base.css's 50ch fieldset. On hover a row lifts on the sheet
   as the list rows do; the page's hover is darker than the sheet in dark theme. */
.ds-radio-group:has(> .cs-settings__sheet) { max-inline-size: none; }
.cs-settings__sheet .ds-radio__hint { font-size: var(--ds-info-label); line-height: var(--ds-info-leading); }
.cs-settings__sheet .ds-radio:hover { background: var(--ds-fill-hover); }

.ds-radio__input:checked + .ds-radio__box { border-color: transparent; background: var(--ds-cta); }
/* Any row that wraps the radio (the ds-radio itself, or a list row like the tie's sides) darkens the empty circle's ring on
   hover; no box around it. */
@media (any-hover: hover) {
  :has(> .ds-radio__input):hover > .ds-radio__input:not(:checked, :disabled) + .ds-radio__box { border-color: var(--ds-text-secondary); }
}
.ds-radio__input:checked + .ds-radio__box::after { visibility: visible; }
.ds-radio__input:focus-visible + .ds-radio__box { outline: 2px solid var(--ds-focus-ring); outline-offset: 0; }

.ds-radio:has(.ds-radio__input:disabled) { background: none; color: var(--ds-text-muted); cursor: not-allowed; }
.ds-radio__input:disabled + .ds-radio__box { border-color: var(--ds-border); background: var(--ds-hover); }
.ds-radio__input:disabled:checked + .ds-radio__box { border-color: transparent; background: var(--ds-text-muted); }

@media (pointer: coarse) {
  .ds-radio { min-block-size: 2.75rem; }
}