/**
 * checkbox.css — Checkbox (input[type="checkbox"]:not([role="switch"]))
 *
 * @layer      variables, reset
 * @requires   layers.css, _variables.css, fields.css (--ui-field-* background/border)
 * @uses       appearance: none — redraws the native control from theme tokens
 * @uses       checked/indeterminate fill with --primary and layer a glyph (never colour alone)
 * @tokens     --ui-checkbox-* (@layer variables; surface/border default to the --ui-field-* family)
 * @see        checkbox.ts: derives select-all group state (data-checkbox-controls)
 *             into the JS-only indeterminate property; styling keys off :indeterminate
 */

@layer variables {
  :root {
    /* Surface + border default to the shared --ui-field-* family (owned in
       fields.css) so a checkbox reads as one family with the controls around it. */
    --ui-checkbox-size: var(--step-4_5);
    --ui-checkbox-background: var(--ui-field-background);
    --ui-checkbox-border-width: var(--ui-field-border-width);
    --ui-checkbox-border-style: var(--ui-field-border-style);
    --ui-checkbox-border-color: var(--ui-field-border-color);
    --ui-checkbox-border-color--hover: var(--ui-field-border-color--hover);
    --ui-checkbox-background--checked: var(--primary);
    --ui-checkbox-border-color--checked: var(--primary);
    --ui-checkbox-radius: var(--radius-xs);
    /* @see https://www.svgbackgrounds.com/tools/svg-to-css/
    ** Set to Legacy / URL Wrapper to update icon */
    --ui-checkbox-checkmark-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='none'/%3E%3Cpolyline points='40 144 96 200 224 72' fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/%3E%3C/svg%3E");
    --ui-checkbox-checkmark-size: var(--step-3);
    --ui-checkbox-indeterminate-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='none'/%3E%3Cline x1='40' y1='128' x2='216' y2='128' fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/%3E%3C/svg%3E");
    --ui-checkbox-indeterminate-size: var(--step-3);
  }
}

@layer reset {
  :where(input[type="checkbox"]:not([role="switch"])) {
    appearance: none;
    flex-shrink: 0;
    inline-size: var(--ui-checkbox-size);
    block-size: var(--ui-checkbox-size);

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

    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);
  }

  :where(input[type="checkbox"]:not([role="switch"]):hover) {
    border-color: var(--ui-checkbox-border-color--hover);
  }

  :where(input[type="checkbox"]:not([role="switch"]):focus-visible) {
    --_ring-offset-width: var(--ring-offset-width);
    --_ring-width: var(--ring-width);
    outline-color: transparent;
  }

  :where(
    input[type="checkbox"]:not([role="switch"]):checked,
    input[type="checkbox"]:not([role="switch"]):indeterminate
  ) {
    background-color: var(--ui-checkbox-background--checked);
    border-color: var(--ui-checkbox-border-color--checked);
    background-repeat: no-repeat;
    background-position: center;
  }

  :where(input[type="checkbox"]:not([role="switch"]):checked) {
    background-image: var(--ui-checkbox-checkmark-mask);
    background-size: var(--ui-checkbox-checkmark-size);
  }

  :where(input[type="checkbox"]:not([role="switch"]):indeterminate) {
    background-image: var(--ui-checkbox-indeterminate-mask);
    background-size: var(--ui-checkbox-indeterminate-size);
  }
}