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

/**
 * Checkbox-button base — paint surface for the theme layer.
 *
 * Two related surfaces in this file:
 *
 *   1. `.slds-checkbox_add-button` — checkbox styled as an
 *      add/remove button. Idle shows a `+` glyph; `:checked` rotates
 *      to a `✓` checkmark.
 *   2. `.slds-checkbox-button` — checkbox-shaped icon button driven
 *      via `_is-checked` / `_is-focused` / `_is-disabled` state
 *      classes (the LBC drives these instead of pseudo-states).
 *
 * Both read `--slds-c-checkboxbutton-*` hooks. Inner glyph geometry
 * (the +/× cross and the rotated check stroke) stays as literal paint
 * because the geometry is proportional and not customer-tunable.
 * Concrete values live in `themes/<theme>.css`.
 */

/* ─────────────── .slds-checkbox_add-button ─────────────── */

.slds-checkbox_add-button .slds-checkbox_faux {
  width: var(--slds-c-checkboxbutton-add-button-size);
  height: var(--slds-c-checkboxbutton-add-button-size);
  position: relative;
  display: inline-block;
  border-style: solid;
  border-width: var(--slds-c-checkboxbutton-add-button-sizing-border);
  border-color: var(--slds-c-checkboxbutton-add-button-color-border, transparent);
  border-radius: var(--slds-c-checkboxbutton-add-button-radius-border);
  background-color: var(--slds-c-checkboxbutton-add-button-color-background);
  cursor: pointer;
}

/* +/× glyph strokes — geometry is literal, color reads the hook. */
.slds-checkbox_add-button .slds-checkbox_faux::before,
.slds-checkbox_add-button .slds-checkbox_faux::after {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  inset-block-end: 0;
  height: 14px;
  width: 2px;
  margin: auto;
  background-color: var(--slds-c-checkboxbutton-add-button-color-foreground);
}

.slds-checkbox_add-button .slds-checkbox_faux::after {
  width: 14px;
  height: 2px;
}

/* Hover/focus/active button-feel — paint reads per-state hooks. */
.slds-checkbox_add-button [type='checkbox']:not([disabled]) ~ .slds-checkbox_faux:hover,
.slds-checkbox_add-button [type='checkbox']:not([disabled]) + .slds-checkbox_faux:hover {
  transition:
    transform 150ms ease-in-out,
    box-shadow 150ms ease-in-out;
  transform: var(--slds-c-checkboxbutton-add-button-transform-hover);
  box-shadow: var(--slds-c-checkboxbutton-add-button-shadow-hover);
}

.slds-checkbox_add-button [type='checkbox']:not([disabled]) ~ .slds-checkbox_faux:active,
.slds-checkbox_add-button [type='checkbox']:not([disabled]) + .slds-checkbox_faux:active {
  transform: none;
  box-shadow:
    0 0 0 0 transparent,
    var(--slds-c-checkboxbutton-add-button-shadow-active);
}

/* Checked: rotates the +/× glyph to a checkmark via per-piece
   geometry. Color reads the hook. */
.slds-checkbox_add-button [type='checkbox']:checked ~ .slds-checkbox_faux,
.slds-checkbox_add-button [type='checkbox']:checked + .slds-checkbox_faux {
  border-color: var(--slds-c-checkboxbutton-add-button-color-border, transparent);
  background-color: var(--slds-c-checkboxbutton-add-button-color-background);
  box-shadow: var(--slds-c-checkboxbutton-add-button-shadow-checked);
}

.slds-checkbox_add-button [type='checkbox']:checked ~ .slds-checkbox_faux::before,
.slds-checkbox_add-button [type='checkbox']:checked + .slds-checkbox_faux::before,
.slds-checkbox_add-button [type='checkbox']:checked ~ .slds-checkbox_faux::after,
.slds-checkbox_add-button [type='checkbox']:checked + .slds-checkbox_faux::after {
  background-color: var(--slds-c-checkboxbutton-add-button-color-foreground);
}

.slds-checkbox_add-button [type='checkbox']:checked ~ .slds-checkbox_faux::before,
.slds-checkbox_add-button [type='checkbox']:checked + .slds-checkbox_faux::before {
  /* RTL: physical — glyph geometry, × stroke positions must not flip */
  left: 5px;
  width: 2px;
  height: 16px;
  transform: rotate(40deg);
}

.slds-checkbox_add-button [type='checkbox']:checked ~ .slds-checkbox_faux::after,
.slds-checkbox_add-button [type='checkbox']:checked + .slds-checkbox_faux::after {
  /* RTL: physical — glyph geometry, × stroke positions must not flip */
  top: 5px;
  left: -10px;
  width: 9px;
  height: 2px;
  transform: rotate(40deg);
}

/* Checked + hover/active: brand-feel transform/shadow. */
.slds-checkbox_add-button [type='checkbox']:checked:not([disabled]) ~ .slds-checkbox_faux:hover,
.slds-checkbox_add-button [type='checkbox']:checked:not([disabled]) + .slds-checkbox_faux:hover {
  transform: var(--slds-c-checkboxbutton-add-button-transform-hover);
  box-shadow: var(--slds-c-checkboxbutton-add-button-shadow-hover);
}

.slds-checkbox_add-button [type='checkbox']:checked:not([disabled]) ~ .slds-checkbox_faux:active,
.slds-checkbox_add-button [type='checkbox']:checked:not([disabled]) + .slds-checkbox_faux:active {
  transform: none;
  box-shadow:
    0 0 0 0 transparent,
    var(--slds-c-checkboxbutton-add-button-shadow-active);
}

/* Focus-visible: inset focus ring; border collapses to allow shadow
   to read as the visible outline. */
.slds-checkbox_add-button [type='checkbox']:focus-visible ~ .slds-checkbox_faux,
.slds-checkbox_add-button [type='checkbox']:focus-visible + .slds-checkbox_faux {
  box-shadow: var(--slds-c-checkboxbutton-add-button-shadow-focus);
  background-color: var(--slds-c-checkboxbutton-add-button-color-background);
  border-width: 0;
}

/* ─────────────── .slds-checkbox-button ─────────────── */

.slds-checkbox-button {
  width: var(--slds-c-checkboxbutton-size);
  height: var(--slds-c-checkboxbutton-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-style: solid;
  border-width: var(--slds-c-checkboxbutton-sizing-border);
  border-color: var(--slds-c-checkboxbutton-color-border, transparent);
  border-radius: var(--slds-c-checkboxbutton-radius-border);
  background-color: var(--slds-c-checkboxbutton-color-background);
  color: var(--slds-c-checkboxbutton-color-foreground);
  cursor: pointer;
}

.slds-checkbox-button .slds-icon {
  fill: currentColor;
}

/* `_is-checked`, `_is-focused`, `_is-disabled` are state classes the
   LBC stamps (parallel to native pseudo-states for inputs that don't
   expose `:checked` etc. via shadow). The form-state allow-list
   covers them. Theme files reassign canonical hooks under each. */

.slds-checkbox-button.slds-checkbox-button_is-checked {
  background-color: var(--slds-c-checkboxbutton-color-background);
  border-color: var(--slds-c-checkboxbutton-color-border, transparent);
  color: var(--slds-c-checkboxbutton-color-foreground);
  box-shadow: var(--slds-c-checkboxbutton-shadow-checked);
}

.slds-checkbox-button.slds-checkbox-button_is-focused {
  outline: 0;
  box-shadow: var(--slds-c-checkboxbutton-shadow-focus);
}

.slds-checkbox-button.slds-checkbox-button_is-disabled {
  background-color: var(--slds-c-checkboxbutton-color-background);
  border-color: var(--slds-c-checkboxbutton-color-border, transparent);
  color: var(--slds-c-checkboxbutton-color-foreground);
  cursor: default;
}