@import url("/css/design_v2/color.css");
@import url("/css/design_v2/font.css");
@import url("/css/design_v2/standards.css");

/*
 * V2 Checkbox control styles
 * - Vertically center box with label text
 * - Make entire control feel clickable (pointer cursor)
 * - Respect design tokens and accessibility focus styles
 */

.pp-v2-field .pp-v2-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--Space-S);
  cursor: pointer;
  user-select: none;
}

.pp-v2-field .pp-v2-checkbox-input {
  margin: 0; /* remove UA default that can misalign vertically */
  flex: 0 0 auto;
  vertical-align: middle;
  cursor: pointer;
}

.pp-v2-field .pp-v2-checkbox-label {
  color: var(--Text-Color-Body);
}

/* Accessible focus for native checkbox */
.pp-v2-field .pp-v2-checkbox-input:focus-visible {
  outline: var(--Focus-Outline-Width) solid var(--Color-Secondary-Yellow-500);
  outline-offset: var(--Focus-Outline-Offset);
}

/* Disabled state */
.pp-v2-field .pp-v2-checkbox-input:disabled {
  cursor: not-allowed;
  opacity: var(--Opacity-Disabled);
}

.pp-v2-field .pp-v2-checkbox-input:disabled + .pp-v2-checkbox-label {
  opacity: var(--Opacity-Disabled);
  cursor: not-allowed;
}