/*
 * FM-10 Checkbox — app/components/ui/checkbox_component.rb
 *
 * A real <input type="checkbox"> stacked under a drawn 20px box via a
 * sibling combinator, so native focus/keyboard/label-click behaviour is
 * free and the visual never drifts from the control's actual state. The
 * input covers the box exactly (position: absolute; inset: 0) with
 * opacity: 0 rather than display: none, so it stays hit-testable and
 * focusable.
 *
 * Checked and indeterminate are both drawn with mask-image so the tick
 * and the minus bar tint with currentColor-style token fills rather than
 * needing separate icon partials. :indeterminate is a native CSS
 * pseudo-class that tracks the DOM-only `indeterminate` property set by
 * checkbox_controller.js.
 *
 * Token vars only — enforced by test/lint/css_token_lint_test.rb.
 */

.ui-checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  cursor: pointer;
}

.ui-checkbox-row--disabled {
  cursor: not-allowed;
}

.ui-checkbox {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  width: var(--icon-md);
  height: var(--icon-md);
}

.ui-checkbox__input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.ui-checkbox__input:disabled {
  cursor: not-allowed;
}

.ui-checkbox__box {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-xs);
  background: var(--color-surface-inset);
  transition: background-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.ui-checkbox__box::after,
.ui-checkbox__box::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: var(--color-on-accent);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
}

/* Tick — CSS mask so it tints with --color-on-accent instead of needing
   an icon partial. */
.ui-checkbox__box::after {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  mask-size: 70% 70%;
  -webkit-mask-size: 70% 70%;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
}

/* Indeterminate minus bar */
.ui-checkbox__box::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
  mask-size: 70% 70%;
  -webkit-mask-size: 70% 70%;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  position: absolute;
  inset: 0;
}

.ui-checkbox__input:checked ~ .ui-checkbox__box,
.ui-checkbox__input:indeterminate ~ .ui-checkbox__box {
  background: var(--color-accent-strong);
}

.ui-checkbox__input:checked:not(:indeterminate) ~ .ui-checkbox__box::after {
  opacity: 1;
}

.ui-checkbox__input:indeterminate ~ .ui-checkbox__box::before {
  opacity: 1;
}

.ui-checkbox__input:focus-visible ~ .ui-checkbox__box {
  box-shadow: var(--focus-halo);
}

.ui-checkbox__input:disabled ~ .ui-checkbox__box {
  background: var(--color-surface-sunken);
}

.ui-checkbox__input:checked:disabled ~ .ui-checkbox__box,
.ui-checkbox__input:indeterminate:disabled ~ .ui-checkbox__box {
  background: var(--color-accent-300);
}

.ui-checkbox__label {
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  color: var(--color-ink);
}

.ui-checkbox-row--disabled .ui-checkbox__label {
  color: var(--color-ink-disabled);
}