/*! Strand UI | MIT License | dillingerstaffing.com */

/* cf: pointer-fine-density */
/* cf: native-state-selectors */

/* ── Base ── */
.strand-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--strand-space-2);
  min-height: var(--strand-touch-target);
  cursor: pointer;
  user-select: none;
  font-family: var(--strand-font-sans);
  font-size: var(--strand-text-sm);
  color: var(--strand-gray-900);
  line-height: var(--strand-leading-snug);
}

/* ── Custom visual ── */
.strand-checkbox__control {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--strand-control-size);
  height: var(--strand-control-size);
  border: 1px solid var(--strand-gray-200);
  border-radius: var(--strand-radius-sm);
  background: var(--strand-surface-elevated);
  color: var(--strand-on-blue-primary);
  flex-shrink: 0;
  transition:
    background var(--strand-duration-fast) var(--strand-ease-out-quart),
    border-color var(--strand-duration-fast) var(--strand-ease-out-quart),
    box-shadow var(--strand-duration-fast) var(--strand-ease-out-quart);
}

.strand-checkbox__icon {
  display: none;
  width: 14px;
  height: 14px;
}

/* ── Focus ring ── */
.strand-checkbox__native:focus-visible ~ .strand-checkbox__control {
  border-color: var(--strand-blue-primary);
  box-shadow: var(--strand-focus-ring);
}

/* ── Checked, mixed: the native input's state ── */
.strand-checkbox__native:checked ~ .strand-checkbox__control,
.strand-checkbox__native:indeterminate ~ .strand-checkbox__control {
  background: var(--strand-blue-primary);
  border-color: var(--strand-blue-primary);
}

.strand-checkbox__native:checked:not(:indeterminate) ~ .strand-checkbox__control .strand-checkbox__icon--check,
.strand-checkbox__native:indeterminate ~ .strand-checkbox__control .strand-checkbox__icon--mixed {
  display: block;
}

/* ── Hover ── */
.strand-checkbox:hover .strand-checkbox__native:enabled ~ .strand-checkbox__control {
  border-color: var(--strand-blue-indicator);
}

.strand-checkbox:hover .strand-checkbox__native:enabled:checked ~ .strand-checkbox__control,
.strand-checkbox:hover .strand-checkbox__native:enabled:indeterminate ~ .strand-checkbox__control {
  background: var(--strand-blue-vivid);
  border-color: var(--strand-blue-vivid);
}

/* ── Label ── */
.strand-checkbox__label {
  color: var(--strand-checkbox-label-color, var(--strand-gray-900));
}

/* ── Disabled ── */
.strand-checkbox:has(.strand-checkbox__native:disabled) {
  opacity: var(--strand-opacity-disabled);
  cursor: not-allowed;
}

@media (pointer: fine) {
  .strand-checkbox--compact {
    min-height: 30px;
  }
}