/**
 * 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;
  }
}
:root {
  --select-arrow-color: var(--color-text);
  --select-width-mobile: 18.75rem; /* 300px minimum on mobile */
  --select-width-desktop: 100%; /* Full width on larger screens */
}

select {
  border: var(--input-outline);
  border-radius: var(--input-radius);
  outline: none;
  background-color: var(--input-bg, var(--color-surface));
  -webkit-appearance: none; /* Remove default arrow in Chrome and Safari */
  -moz-appearance: none; /* Remove default arrow in Firefox */
  appearance: none; /* Remove default arrow in other browsers */
  background-image: linear-gradient(45deg, transparent 50%, var(--select-arrow-color, currentColor) 50%), linear-gradient(135deg, var(--select-arrow-color, currentColor) 50%, transparent 50%);
  background-position: calc(100% - 1.25rem) center, calc(100% - 1rem) center;
  background-size: 0.3125rem 0.3125rem, 0.3125rem 0.3125rem;
  background-repeat: no-repeat;
  padding-inline-start: var(--input-padding-inline);
  padding-inline-end: 2.5rem;
  padding-block: var(--input-padding-block);
  width: max(var(--select-width-mobile), var(--select-width-desktop));
}

/* ==========================================================================
   Option Styling with Data Attributes
   ========================================================================== */
/*
option[data-option="primary"] {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  font-weight: 600;
}

option[data-option="success"] {
  background-color: var(--color-success-bg);
  color: var(--color-success);
}

option[data-option="error"] {
  background-color: var(--color-error-bg);
  color: var(--color-error);
}

option[data-option="warning"] {
  background-color: var(--color-warning-bg);
  color: var(--color-warning);
}
*/
/*
option[data-size="sm"] {
  font-size: 0.875rem; // 14px
  padding: 0.25rem 0.5rem;
}

option[data-size="lg"] {
  font-size: 1.125rem; // 18px
  padding: 0.75rem 1rem;
  font-weight: 500;
}
*/
/*
option[data-featured="true"] {
  font-weight: 700;
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

option[data-category="premium"] {
  background-color: var(--color-warning-bg);
  font-style: italic;
}
*/
:root {
  --input-border-color: var(--color-border);
  --input-appearance: none;
  --input-bg: inherit;
  --input-border: none;
  --input-outline: thin solid var(--input-border-color);
  --input-padding-inline: 0.6rem;
  --input-padding-block: 0.4rem;
  --input-radius: var(--radius);
  --input-fs: var(--fs);
  --input-width: clamp(12.5rem, 100%, 31.25rem);
  --input-focus-outline: medium solid var(--input-border-color);
  --input-focus-outline-offset: 0;
  --input-disabled-bg: var(--color-disabled-bg);
  --input-disabled-opacity: 0.6;
  --input-disabled-cursor: not-allowed;
  --placeholder-color: var(--color-text-tertiary);
  --placeholder-style: italic;
  --placeholder-fs: smaller;
  --form-direction: column;
  /* ==========================================================================
     Size Tokens
     ========================================================================== */
  --checkbox-size-xs: 0.875rem; /* 14px - extra small */
  --checkbox-size-sm: 1rem; /* 16px */
  --checkbox-size-md: 1.25rem; /* 20px */
  --checkbox-size-lg: 1.5rem; /* 24px */
  /* Gap tokens for each size variant */
  --checkbox-gap-xs: 0.375rem; /* 6px */
  --checkbox-gap-sm: 0.5rem; /* 8px */
  --checkbox-gap-md: 0.5rem; /* 8px - default */
  --checkbox-gap-lg: 0.625rem; /* 10px */
  /* ==========================================================================
     Base Properties
     ========================================================================== */
  --checkbox-size: var(--checkbox-size-md);
  --checkbox-bg: var(--color-surface);
  --checkbox-border: 0.125rem solid var(--color-neutral-600); /* 2px border */
  --checkbox-border-color: var(--color-neutral-600); /* Gray 500 */
  --checkbox-radius: 0.25rem; /* 4px */
  --checkbox-cursor: pointer;
  --checkbox-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  /* ==========================================================================
     Checked State Properties
     ========================================================================== */
  --checkbox-checked-outline-color: var(--color-success);
  --checkbox-checked-bg: var(--color-success);
}

form {
  display: flex;
  flex-direction: var(--form-direction);
  gap: 1rem;
}
form > div {
  display: flex;
  gap: 1rem;
  flex-direction: var(--form-direction);
}
form label {
  display: block;
}

input {
  -webkit-appearance: var(--input-appearance);
  -moz-appearance: var(--input-appearance);
  appearance: var(--input-appearance);
  width: var(--input-width);
  border: var(--input-border);
  outline: var(--input-outline);
  padding-inline: var(--input-padding-inline);
  padding-block: var(--input-padding-block);
  border-radius: var(--input-radius);
  background-color: var(--input-bg, var(--color-surface));
}
input:focus-visible, input:focus {
  outline: var(--input-focus-outline);
  outline-offset: var(--input-focus-outline-offset);
}
input[aria-disabled=true], input:disabled {
  --input-border-color: var(--color-border-subtle);
  background-color: var(--input-disabled-bg);
  opacity: var(--input-disabled-opacity);
  cursor: var(--input-disabled-cursor);
  text-transform: capitalize;
  text-decoration: line-through;
}

input[type]:not([type=checkbox], [type=radio])::placeholder,
textarea::placeholder,
select::placeholder {
  color: var(--placeholder-color);
  font-style: var(--placeholder-style);
  font-size: var(--placeholder-fs);
  text-transform: capitalize;
}
input[type]:not([type=checkbox], [type=radio])[aria-required=true]::placeholder,
textarea[aria-required=true]::placeholder,
select[aria-required=true]::placeholder {
  color: var(--color-required, var(--placeholder-color));
  font-weight: 600;
}
input[type]:not([type=checkbox], [type=radio])[aria-required=true]::placeholder::after,
textarea[aria-required=true]::placeholder::after,
select[aria-required=true]::placeholder::after {
  content: "* ";
}

input[type=checkbox] {
  opacity: 1;
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  margin: 0;
  cursor: var(--checkbox-cursor);
  flex-shrink: 0;
}
input[type=checkbox]:checked {
  background-color: var(--checkbox-bg, red);
  outline: var(--checkbox-checked-outline-color) solid 2px;
  background: var(--checkbox-checked-bg) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'><path d='M6.173 11.414l-3.89-3.89 1.414-1.414 2.476 2.475 5.657-5.657 1.414 1.414z'/></svg>") no-repeat center center;
}

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