/* checkbox-radio-switch.css: Checkbox, radio, switch (component 6). Owner: group A (P2.T4). Tokens only, logical properties only. */

[data-component="checkbox-radio-switch"].choice {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  box-sizing: border-box;
  min-block-size: var(--size-control-sm);
  font: var(--type-body);
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
[data-component="checkbox-radio-switch"].choice[data-bare="true"] { min-block-size: var(--size-target-min); }
.choice__label { min-inline-size: 0; }

/* The hit area: 24 by 24 around the 16 px box (the switch is 32 wide). The real input fills it, invisible. */
.choice__box {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  inline-size: var(--size-target-min);
  block-size: var(--size-target-min);
}
.choice[data-kind="switch"] .choice__box { inline-size: var(--size-switch-w); }
.choice__input {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  opacity: 0;
  cursor: inherit;
}

/* Checkbox and radio box. */
.choice__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  inline-size: var(--size-checkbox);
  block-size: var(--size-checkbox);
  background: var(--surface);
  border: var(--border-width) solid var(--border-control);
  border-radius: var(--radius-chip);
  color: var(--brand-contrast);
  transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.choice[data-kind="radio"] .choice__mark { border-radius: var(--radius-round); }
.choice__mark .icon {
  display: none;
  inline-size: calc(var(--size-checkbox) - var(--space-2));
  block-size: calc(var(--size-checkbox) - var(--space-2));
}
.choice__input:checked + .choice__mark,
.choice__input[type="checkbox"]:indeterminate + .choice__mark { background: var(--brand); border-color: var(--brand); }
.choice__input:checked + .choice__mark .icon:first-child { display: block; }
.choice__input[type="checkbox"]:indeterminate + .choice__mark .icon:first-child { display: none; }
.choice__input[type="checkbox"]:indeterminate + .choice__mark .icon:last-child { display: block; }
/* Radio dot: 6 px. */
.choice[data-kind="radio"] .choice__input:checked + .choice__mark::after {
  content: "";
  inline-size: calc(var(--space-2) + var(--space-1));
  block-size: calc(var(--space-2) + var(--space-1));
  border-radius: var(--radius-round);
  background: var(--brand-contrast);
}

/* Hover, active. */
.choice:hover .choice__input:not(:checked, [type="checkbox"]:indeterminate, :disabled, [aria-disabled="true"]) + .choice__mark,
.choice[data-force="hover"] .choice__input:not(:checked, [type="checkbox"]:indeterminate, :disabled, [aria-disabled="true"]) + .choice__mark { background: var(--surface-hover); border-color: var(--text-secondary); }
.choice:hover .choice__input:is(:checked, [type="checkbox"]:indeterminate):not(:disabled, [aria-disabled="true"]) + .choice__mark,
.choice[data-force="hover"] .choice__input:is(:checked, [type="checkbox"]:indeterminate):not(:disabled, [aria-disabled="true"]) + .choice__mark { background: var(--brand-hover); border-color: var(--brand-hover); }
.choice:active .choice__input:not(:checked, [type="checkbox"]:indeterminate, :disabled, [aria-disabled="true"]) + .choice__mark,
.choice[data-force="active"] .choice__input:not(:checked, [type="checkbox"]:indeterminate, :disabled, [aria-disabled="true"]) + .choice__mark { background: var(--border); }
.choice:active .choice__input:is(:checked, [type="checkbox"]:indeterminate):not(:disabled, [aria-disabled="true"]) + .choice__mark,
.choice[data-force="active"] .choice__input:is(:checked, [type="checkbox"]:indeterminate):not(:disabled, [aria-disabled="true"]) + .choice__mark { background: var(--brand-hover); }

/* Focus-visible: the ring around the visible box (the input itself is invisible). */
.choice__input:focus-visible + .choice__mark,
.choice__input:focus-visible + .choice__track,
.choice[data-force="focus-visible"] .choice__mark,
.choice[data-force="focus-visible"] .choice__track {
  outline: var(--border-width-thick) solid var(--focus-ring);
  outline-offset: var(--space-2);
}

/* Disabled (and disabled by permission): --border and --surface-sunken, the mark in --text-disabled. */
.choice:has(.choice__input:is(:disabled, [aria-disabled="true"])) { color: var(--text-disabled); cursor: not-allowed; }
.choice__input:is(:disabled, [aria-disabled="true"]) + .choice__mark { background: var(--surface-sunken); border-color: var(--border); color: var(--text-disabled); }
.choice__input:is(:disabled, [aria-disabled="true"]):is(:checked, [type="checkbox"]:indeterminate) + .choice__mark { background: var(--surface-sunken); border-color: var(--border); }
.choice[data-kind="radio"] .choice__input:is(:disabled, [aria-disabled="true"]):checked + .choice__mark::after { background: var(--text-disabled); }

/* Switch: 32 by 18 track, 14 px thumb inset 2 px; the thumb travel mirrors in right-to-left. */
.choice__track {
  position: relative;
  box-sizing: border-box;
  inline-size: var(--size-switch-w);
  block-size: var(--size-switch-h);
  border-radius: var(--radius-round);
  background: var(--border-control);
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.choice__thumb {
  position: absolute;
  inset-block-start: var(--space-1);
  inset-inline-start: var(--space-1);
  inline-size: var(--size-switch-thumb);
  block-size: var(--size-switch-thumb);
  border-radius: var(--radius-round);
  background: var(--surface);
  transition: transform var(--duration-fast) var(--ease-standard);
}
.choice__input:checked + .choice__track { background: var(--brand); }
.choice__input:checked + .choice__track .choice__thumb { transform: translateX(calc(var(--size-switch-w) - var(--size-switch-thumb) - 2 * var(--space-1))); }
[dir="rtl"] .choice__input:checked + .choice__track .choice__thumb { transform: translateX(calc(-1 * (var(--size-switch-w) - var(--size-switch-thumb) - 2 * var(--space-1)))); }
.choice:hover .choice__input:not(:checked, :disabled, [aria-disabled="true"]) + .choice__track,
.choice[data-force="hover"] .choice__input:not(:checked, :disabled, [aria-disabled="true"]) + .choice__track { background: var(--text-secondary); }
.choice:hover .choice__input:checked:not(:disabled, [aria-disabled="true"]) + .choice__track,
.choice[data-force="hover"] .choice__input:checked:not(:disabled, [aria-disabled="true"]) + .choice__track,
.choice[data-force="active"] .choice__input:checked:not(:disabled, [aria-disabled="true"]) + .choice__track { background: var(--brand-hover); }
.choice__input:is(:disabled, [aria-disabled="true"]) + .choice__track { background: var(--border); }
.choice__input:is(:disabled, [aria-disabled="true"]) + .choice__track .choice__thumb { background: var(--surface-sunken); }

/* Row layout (settings): the label at the inline-start, the switch at the inline-end of a full-width row. */
.choice[data-layout="row"] { display: flex; inline-size: 100%; justify-content: space-between; }

/* Radio group. */
.choice-group { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.choice-group__legend { padding: 0; margin-block-end: var(--space-2); font: var(--type-label); color: var(--text); }
.choice-group__items { display: flex; flex-direction: column; gap: 0; }
.choice-group[data-orientation="horizontal"] .choice-group__items { flex-direction: row; flex-wrap: wrap; gap: var(--space-5); }

/* Coarse pointer at small width: rows are 44 tall. */
@media (width < 768px) and (pointer: coarse) {
  [data-component="checkbox-radio-switch"].choice { min-block-size: var(--size-control-touch); }
}

/* Kitchen sink helpers: a stack of choices and a settings row. */
.choice-stack { display: flex; flex-direction: column; align-items: flex-start; }
.choice-stack--indent { padding-inline-start: var(--space-7); }
.choice-row-sample { inline-size: var(--size-field-max); max-inline-size: 100%; padding-block: var(--space-2); border-block: var(--border-width) solid var(--border); }