/*
 * Copyright (c) 2026, Salesforce, Inc.,
 * All rights reserved.
 * For full license text, see the LICENSE.txt file
 */

/**
 * Checkbox base — paint surface for the theme layer.
 *
 * Reads only canonical `--slds-c-checkbox-*` hooks.
 *
 * State paint and the canonical hook surface
 * -------------------------------------------
 * `:checked`, `:indeterminate`, `:disabled` are out-of-carveout
 * pseudo-states — the RFC's `-hover`/`-focus`/`-active`/`-disabled`
 * suffix carveout for hook names doesn't extend to `-checked` or
 * similar. So instead of opening per-state hooks, base paints with
 * the canonical (`--slds-c-checkbox-color-background`,
 * `--slds-c-checkbox-color-border`, etc.) and the theme files
 * reassign those canonical hooks from inside the `:checked` /
 * `:indeterminate` / `[disabled]` pseudo-class selectors. The
 * `-shadow-checked` and `-shadow-focus` per-state hooks are an
 * exception: shadow is a separate paint property where the per-state
 * value is structurally distinct (the focus ring's geometry is
 * different from a checked-state shadow), and the carveout's
 * `-focus` suffix covers shadow-focus directly.
 *
 * Checkmark glyph geometry (`-mark-sizing-*`) is exposed as a
 * design-system-controlled hook surface, but customers shouldn't
 * tune it directly: the values are proportional to the box size and
 * adjusting one without the other breaks the visual. The hook
 * existence is dictated by RFC 1157's "themes/base.css reads only
 * `--slds-c-*`" rule.
 */

.slds-checkbox {
  display: inline-block;
  position: relative;
}

.slds-checkbox .slds-checkbox_faux {
  width: var(--slds-c-checkbox-size);
  height: var(--slds-c-checkbox-size);
  display: inline-block;
  position: relative;
  flex-shrink: 0;
  vertical-align: middle;
  border-radius: var(--slds-c-checkbox-radius-border);
  border-width: var(--slds-c-checkbox-sizing-border);
  border-style: solid;
  border-color: var(--slds-c-checkbox-color-border, transparent);
  background-color: var(--slds-c-checkbox-color-background);
  transition:
    border 0.1s linear,
    background-color 0.1s linear;
}

.slds-checkbox .slds-checkbox__label .slds-form-element__label {
  display: inline;
  vertical-align: middle;
  font-size: var(--slds-c-checkbox-label-font-size);
  font-weight: normal;
  color: var(--slds-c-checkbox-label-color-foreground);
}

.slds-checkbox [type='checkbox'] {
  width: 1px;
  height: 1px;
  border: 0;
  clip: rect(0 0 0 0);
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  pointer-events: auto;
}

/* Checked state — theme reassigns canonical color hooks from inside
   the `:checked` selector. base only paints with the canonical hook
   read; the per-state `-shadow-checked` is the one exception (shadow
   is a distinct paint, not a color slot). */
.slds-checkbox [type='checkbox']:checked + .slds-checkbox_faux,
.slds-checkbox [type='checkbox']:checked ~ .slds-checkbox_faux,
.slds-checkbox [type='checkbox']:checked + .slds-checkbox__label .slds-checkbox_faux {
  box-shadow: var(--slds-c-checkbox-shadow-checked);
}

/* Checkmark glyph — proportional diagonal stroke. */
.slds-checkbox [type='checkbox']:checked + .slds-checkbox_faux::after,
.slds-checkbox [type='checkbox']:checked ~ .slds-checkbox_faux::after,
.slds-checkbox [type='checkbox']:checked + .slds-checkbox__label .slds-checkbox_faux::after {
  display: block;
  content: '';
  height: var(--slds-c-checkbox-mark-sizing-block);
  width: var(--slds-c-checkbox-mark-sizing-inline);
  position: absolute;
  inset-block-start: 50%;

  /* RTL: physical (mirrors SLDS1 @noflip) — centering paired with translate */
  left: 50%;
  transform: translate3d(-50%, -50%, 0) rotate(-45deg);
  border-block-end: var(--slds-c-checkbox-mark-sizing-border) solid
    var(--slds-c-checkbox-mark-color-foreground);

  /* RTL: physical (mirrors SLDS1 @noflip) — glyph shape, checkmark L-stroke must not flip */
  border-left: var(--slds-c-checkbox-mark-sizing-border) solid var(--slds-c-checkbox-mark-color-foreground);
}

/* Focus-visible state. */
.slds-checkbox [type='checkbox']:focus-visible + .slds-checkbox_faux,
.slds-checkbox [type='checkbox']:focus-visible ~ .slds-checkbox_faux,
.slds-checkbox [type='checkbox']:focus-visible + .slds-checkbox__label .slds-checkbox_faux {
  border-color: var(--slds-c-checkbox-color-border, transparent);
  box-shadow: var(--slds-c-checkbox-shadow-focus);
  outline: 1px solid transparent;
  outline-offset: 1px;
}

/* Indeterminate state — same fill/border treatment as :checked. */

.slds-checkbox [type='checkbox']:indeterminate + .slds-checkbox_faux::after,
.slds-checkbox [type='checkbox']:indeterminate ~ .slds-checkbox_faux::after,
.slds-checkbox [type='checkbox']:indeterminate + .slds-checkbox__label .slds-checkbox_faux::after {
  content: '';
  display: block;
  position: absolute;
  inset-block-start: 50%;

  /* RTL: physical (mirrors SLDS1 @noflip) — centering paired with translate */
  left: 50%;
  width: var(--slds-c-checkbox-mark-sizing-inline);
  border: 0;
  border-bottom: var(--slds-c-checkbox-mark-sizing-border) solid var(--slds-c-checkbox-mark-color-foreground);
  transform: translate3d(-50%, -50%, 0);
}

.slds-checkbox [type='checkbox'][disabled] + .slds-checkbox_faux::after,
.slds-checkbox [type='checkbox'][disabled] ~ .slds-checkbox_faux::after,
.slds-checkbox [type='checkbox'][disabled] + .slds-checkbox__label .slds-checkbox_faux::after {
  border-color: var(--slds-c-checkbox-mark-color-foreground, transparent);
}

/* Form-element context: trailing margin so the label clears the box. */
.slds-form-element .slds-checkbox [type='checkbox'] + .slds-checkbox_faux,
.slds-form-element .slds-checkbox [type='checkbox'] ~ .slds-checkbox_faux,
.slds-form-element .slds-checkbox [type='checkbox'] + .slds-checkbox__label .slds-checkbox_faux {
  margin-inline-end: var(--slds-c-checkbox-margin-inline-end);
}

/**
 * Standalone variant — checkbox with top-level label, value != label.
 */
.slds-checkbox.slds-checkbox_standalone {
  pointer-events: none;
}

.slds-checkbox.slds-checkbox_standalone [type='checkbox'] {
  width: var(--slds-c-checkbox-size);
  height: var(--slds-c-checkbox-size);
  margin: 0;
  clip: auto;
  opacity: 0;
}