/*
 * Checkbox control — Figma "Multi Select Option Row" checkbox, lifted out
 * of components/chrome/multiselect.css so standalone form checkboxes (the
 * upload consent toggles) share one definition with the dropdown rows.
 *
 * 20px box, 4px radius, surface fill → brand gradient + checkmark when
 * checked. Layout (alignment, margins) stays with the calling component.
 *
 * Migrate when: the gem ships a checkbox component. This file then
 * disappears and callers bind to the gem class.
 */

.checkbox {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 0;
  border-radius: var(--corner-radius-xs);
  background-color: var(--background-surface-1);
  cursor: pointer;
}
.checkbox:checked {
  background-image: var(--brand-gradient);
}
.checkbox:checked::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 6px;
  height: 11px;
  border: solid var(--text-light);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}