/**
 * Checkbox Wrapper Component Styles
 *
 * Modern CSS architecture using :has() selector with ARIA attributes.
 * No JavaScript class management required - ARIA attributes drive both
 * accessibility AND styling.
 *
 * CSS Custom Properties:
 * - --checkbox-gap: Space between checkbox and label (default: 0.5rem)
 * - --checkbox-disabled-opacity: Opacity for disabled state (default: 0.6)
 * - --checkbox-disabled-color: Label color when disabled (default: var(--color-disabled-text))
 * - --checkbox-label-fs: Label font size (default: 1rem)
 * - --checkbox-label-lh: Label line height (default: 1.5)
 * - --color-required: Required indicator color (default: var(--color-required))
 * - --checkbox-focus-ring-color: Focus ring color (default: var(--color-focus-ring))
 * - --checkbox-focus-ring-width: Focus ring width (default: 0.125rem)
 * - --checkbox-focus-ring-offset: Focus ring offset (default: 0.125rem)
 * - --checkbox-hover-label-color: Label color on hover (default: inherit)
 * - --checkbox-error-label-color: Label color when invalid (default: var(--color-error-text))
 * - --checkbox-valid-label-color: Label color when valid (default: var(--color-success))
 * - --checkbox-focus-radius: Focus outline border radius (default: 0.125rem)
 *
 * WCAG 2.1 AA Compliance:
 * - 2.4.7 Focus Visible: Focus-visible indicators with sufficient contrast
 * - 2.3.3 Animation from Interactions: Respects prefers-reduced-motion
 * - 3.3.1 Error Identification: Visual error states with color + text
 * - 4.1.2 Name, Role, Value: ARIA attributes for assistive technologies
 * - 1.4.13 Content on Hover or Focus: Hover states for visual feedback
 */
div:has(> input[type=checkbox]) {
  display: flex;
  align-items: center;
  gap: var(--checkbox-gap, 0.5rem);
  position: relative;
  /* ==========================================================================
     Size Variants - Applied via data-checkbox-size attribute
     ========================================================================== */
}
div:has(> input[type=checkbox]) > input[type=checkbox] {
  flex-shrink: 0;
  order: -1;
}
div:has(> input[type=checkbox]):not(:has(> input[aria-disabled=true])):hover .checkbox-label {
  color: var(--checkbox-hover-label-color, currentColor);
}
div:has(> input[type=checkbox]):has(> input:focus-visible) .checkbox-label {
  outline: var(--checkbox-focus-ring-width, 0.125rem) solid var(--checkbox-focus-ring-color, var(--color-focus-ring));
  outline-offset: var(--checkbox-focus-ring-offset, 0.125rem);
  border-radius: var(--checkbox-focus-radius, 0.125rem);
}
div:has(> input[type=checkbox]):has(> input[aria-disabled=true]) {
  opacity: var(--checkbox-disabled-opacity, 0.6);
  cursor: not-allowed;
}
div:has(> input[type=checkbox]):has(> input[aria-disabled=true]) .checkbox-label {
  color: var(--checkbox-disabled-color, var(--color-disabled-text));
  cursor: not-allowed;
}
div:has(> input[type=checkbox]):has(> input[aria-invalid=true]) .checkbox-label {
  color: var(--checkbox-error-label-color, var(--color-error-text));
}
div:has(> input[type=checkbox]):has(> input[aria-invalid=false]:checked) label[for] {
  color: var(--checkbox-valid-label-color, currentColor);
}
div:has(> input[type=checkbox])[data-checkbox-size~=xs] {
  --checkbox-size: var(--checkbox-size-xs);
  --checkbox-gap: var(--checkbox-gap-xs, 0.375rem);
}
div:has(> input[type=checkbox])[data-checkbox-size~=sm] {
  --checkbox-size: var(--checkbox-size-sm);
  --checkbox-gap: var(--checkbox-gap-sm, 0.5rem);
}
div:has(> input[type=checkbox])[data-checkbox-size~=md] {
  --checkbox-size: var(--checkbox-size-md);
  --checkbox-gap: var(--checkbox-gap-md, 0.5rem);
}
div:has(> input[type=checkbox])[data-checkbox-size~=lg] {
  --checkbox-size: var(--checkbox-size-lg);
  --checkbox-gap: var(--checkbox-gap-lg, 0.625rem);
}

.checkbox-label {
  cursor: pointer;
  font-size: var(--checkbox-label-fs, 1rem);
  line-height: var(--checkbox-label-lh, 1.5);
  user-select: none;
  margin: 0;
  flex: 1;
  min-width: 0;
  transition: color 0.2s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .checkbox-label {
    transition: none;
  }
}
.checkbox-label .checkbox-required {
  color: var(--color-required);
  font-weight: 600;
  margin-inline-start: 0.125rem;
}

@media (forced-colors: active) {
  .checkbox-input {
    forced-color-adjust: auto;
  }
}

@container (max-width: 400px) {
  div:has(> input[type=checkbox]) {
    flex-direction: column;
    align-items: flex-start;
  }
}

/*# sourceMappingURL=checkbox.css.map */