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

/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */

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

/**
  * Creates a custom styled checkbox
  */
.slds-checkbox .slds-checkbox_faux {
  width: var(--slds-g-sizing-5);
  height: var(--slds-g-sizing-5);
  display: inline-block;
  position: relative;
  flex-shrink: 0;
  vertical-align: middle;
  border-radius: var(--slds-c-checkbox-radius-border, var(--slds-g-radius-border-1));
  border-width: var(--slds-s-mark-sizing-border, var(--slds-g-sizing-border-1));
  border-style: solid;
  border-color: var(
    --slds-c-checkbox-color-border,
    var(--slds-s-mark-color-border, var(--slds-g-color-border-2))
  );
  background-color: var(
    --slds-c-checkbox-color-background,
    var(--slds-s-mark-color-background, var(--slds-g-color-surface-container-1))
  );
  box-shadow: var(--slds-c-checkbox-shadow);
  transition:
    border 0.1s linear,
    background-color 0.1s linear;
}

.slds-checkbox .slds-checkbox__label,
.slds-form-element:has(.slds-checkbox) > .slds-form-element__label {
  cursor: pointer;
}

.slds-checkbox:has([type='checkbox'][disabled]) .slds-checkbox__label,
.slds-form-element:has(.slds-checkbox [type='checkbox'][disabled]) > .slds-form-element__label {
  cursor: default;
}

/**
  * Container for faux checkbox, text, and slds-form-element__label
  */
.slds-checkbox .slds-checkbox__label .slds-form-element__label {
  /* When slds-form-element__label is inline with slds-checkbox_faux, display as inline */
  display: inline;
  vertical-align: middle;
  font-size: var(--slds-s-label-font-size, var(--slds-g-font-scale-neg-2));
  font-weight: normal;
  color: var(--slds-g-color-on-surface-2);
}

/**
  * Checkbox
  *
  * Hidden from view, see .slds-checkbox_faux for visual faux checkbox.
  */
.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;
  cursor: pointer;
}

.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 {
  --slds-c-checkbox-color-background: var(
    --slds-c-checkbox-color-background-checked,
    var(--slds-s-mark-color-background-checked, var(--slds-g-color-surface-container-1))
  );
}

.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-g-sizing-2);
  width: var(--slds-g-sizing-3);
  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-g-sizing-border-2) solid
    var(--slds-s-mark-color-foreground-checked, var(--slds-g-color-border-accent-2));

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

.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 {
  --slds-c-checkbox-color-border: var(
    --slds-c-checkbox-color-border-focus,
    var(--slds-s-input-color-border-focus, var(--slds-g-color-border-accent-1))
  );
  --slds-c-checkbox-shadow: var(
    --slds-c-checkbox-shadow-focus,
    var(--slds-g-shadow-outset-focus-1, 0 0 3px var(--slds-g-color-accent-2))
  );

  outline: var(--slds-g-sizing-1) solid transparent;
  outline-offset: var(--slds-g-sizing-1);
}

.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 {
  --slds-c-checkbox-shadow: var(--slds-s-mark-shadow-checked);
}

.slds-checkbox [type='checkbox']:focus-visible:checked > .slds-checkbox_faux,
.slds-checkbox [type='checkbox']:focus-visible:checked ~ .slds-checkbox_faux,
.slds-checkbox [type='checkbox']:focus-visible:checked + .slds-checkbox__label .slds-checkbox_faux {
  --slds-c-checkbox-color-border: var(
    --slds-c-checkbox-color-border-focus,
    var(--slds-s-input-color-border-focus, var(--slds-g-color-border-accent-1))
  );
  --slds-c-checkbox-shadow: var(--slds-g-shadow-outset-focus-1);
}

.slds-checkbox [type='checkbox']:indeterminate + .slds-checkbox_faux,
.slds-checkbox [type='checkbox']:indeterminate ~ .slds-checkbox_faux,
.slds-checkbox [type='checkbox']:indeterminate + .slds-checkbox__label .slds-checkbox_faux {
  --slds-c-checkbox-color-border: var(
    --slds-c-checkbox-color-border-checked,
    var(--slds-s-input-color-border-checked)
  );
  --slds-c-checkbox-color-background: var(
    --slds-c-checkbox-color-background-checked,
    var(--slds-s-mark-color-background-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-g-sizing-3);
  border: 0;
  border-bottom: var(--slds-g-sizing-border-2) solid
    var(--slds-s-mark-color-foreground-checked, var(--slds-g-color-border-accent-2));
  transform: translate3d(-50%, -50%, 0);
}

.slds-checkbox [type='checkbox'][disabled] {
  cursor: default;
}

.slds-checkbox [type='checkbox'][disabled] + .slds-checkbox_faux,
.slds-checkbox [type='checkbox'][disabled] ~ .slds-checkbox_faux,
.slds-checkbox [type='checkbox'][disabled] + .slds-checkbox__label .slds-checkbox_faux {
  border-color: var(--slds-g-color-border-disabled-1);
  background-color: var(--slds-g-color-disabled-container-2);
}

.slds-checkbox [type='checkbox'][disabled]:checked + .slds-checkbox_faux,
.slds-checkbox [type='checkbox'][disabled]:checked ~ .slds-checkbox_faux,
.slds-checkbox [type='checkbox'][disabled]:checked + .slds-checkbox__label .slds-checkbox_faux {
  border-color: var(--slds-g-color-border-disabled-1);
  background-color: var(--slds-g-color-disabled-container-2);
}

.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-g-color-on-disabled-2);
}

.slds-has-error .slds-checkbox [type='checkbox'] + .slds-checkbox_faux,
.slds-has-error .slds-checkbox [type='checkbox'] ~ .slds-checkbox_faux,
.slds-has-error .slds-checkbox [type='checkbox'] + .slds-checkbox__label .slds-checkbox_faux {
  border-color: var(--slds-g-color-border-error-1);
  border-width: var(--slds-g-sizing-border-2);
}

.slds-has-error .slds-checkbox [type='checkbox']:checked + .slds-checkbox_faux,
.slds-has-error .slds-checkbox [type='checkbox']:checked ~ .slds-checkbox_faux,
.slds-has-error .slds-checkbox [type='checkbox']:checked + .slds-checkbox__label .slds-checkbox_faux {
  border-color: var(--slds-g-color-border-error-1);
  background-color: var(--slds-s-mark-color-background-invalid);
  --slds-c-checkbox-shadow: var(--slds-s-mark-shadow-checked);
}

.slds-has-error .slds-checkbox [type='checkbox']:focus-visible + .slds-checkbox_faux,
.slds-has-error .slds-checkbox [type='checkbox']:focus-visible ~ .slds-checkbox_faux,
.slds-has-error .slds-checkbox [type='checkbox']:focus-visible + .slds-checkbox__label .slds-checkbox_faux {
  border-color: var(--slds-g-color-border-error-1);
  border-width: var(--slds-g-sizing-border-2);
  --slds-c-checkbox-shadow: var(--slds-g-shadow-outset-focus-1);
}

.slds-has-error .slds-checkbox [type='checkbox']:focus-visible:checked + .slds-checkbox_faux,
.slds-has-error .slds-checkbox [type='checkbox']:focus-visible:checked ~ .slds-checkbox_faux,
.slds-has-error
  .slds-checkbox
  [type='checkbox']:focus-visible:checked
  + .slds-checkbox__label
  .slds-checkbox_faux {
  border-color: var(--slds-g-color-border-error-1);
  border-width: var(--slds-g-sizing-border-2);
  --slds-c-checkbox-shadow: var(--slds-g-shadow-outset-focus-1);
}

.slds-has-error .slds-checkbox [type='checkbox']:checked + .slds-checkbox_faux::after,
.slds-has-error .slds-checkbox [type='checkbox']:checked ~ .slds-checkbox_faux::after,
.slds-has-error .slds-checkbox [type='checkbox']:checked + .slds-checkbox__label .slds-checkbox_faux::after {
  border-color: var(--slds-s-mark-color-foreground-invalid, var(--slds-g-color-border-error-1));
}

.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-g-sizing-3);
}

/**
 * Checkbox with top-level label and value != label
 */
.slds-checkbox_standalone {
  /* Allows pointer-event to pass through to input */
  pointer-events: none;
}

.slds-checkbox_standalone [type='checkbox'] {
  /* Increase dimensions since the pointer-event is being passed to this element */
  width: var(--slds-g-sizing-5);
  height: var(--slds-g-sizing-5);
  margin: 0;

  /* This allows element to be available but since visibily hidden */
  clip: auto;

  /* Visually hide but keep size and pointer events, doesn't impact screen readers  */
  opacity: 0;
}

.slds-checkbox_faux {
  display: block;
}