@layer components {
  /* Form Component
     ========================================================================== */

  /* Form Group */
  .form__group {
    flex: 1;
    min-inline-size: 0; /* Prevent flex children from overflowing */
  }

  /* Form Input Field */
  .form__input {
    display: block;
    inline-size: 100%;
    max-inline-size: 100%;
    padding: var(--block-space-three-eighths) var(--block-space-half);
    border: var(--border);
    border-radius: var(--border-radius);
    outline: none;
    transition:
      box-shadow 250ms,
      border-color 250ms;
  }

  /* Textarea auto-grow with pure CSS */
  textarea.form__input {
    resize: none;
    field-sizing: content;
    max-block-size: 20lh;
    min-block-size: 3lh;
  }

  /* Modern focus styles with :focus-visible */
  .form__input:focus-visible {
    box-shadow: var(--input-focus-ring);
    border-color: var(--input-focus-border-color);
  }

  /* Invalid state */
  .form__input--invalid {
    border-color: var(--color-red);
    /* Shake animation on invalid */
    animation: input-shake 0.3s ease-in-out;
  }

  /* Disabled state */
  .form__input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: color-mix(
      in oklch,
      var(--color-bg-secondary),
      gray 5%
    );
  }

  /* Placeholder styling */
  .form__input::placeholder {
    color: color-mix(in oklch, currentColor, transparent 60%);
  }

  /* Auto-fill background fix */
  .form__input:-webkit-autofill {
    box-shadow:
      0 0 0 100px var(--color-bg-secondary) inset,
      var(--input-focus-ring);
  }

  /* Shake animation for invalid inputs */
  @keyframes input-shake {
    0%,
    100% {
      transform: translateX(0);
    }
    10%,
    30%,
    50%,
    70%,
    90% {
      transform: translateX(-2px);
    }
    20%,
    40%,
    60%,
    80% {
      transform: translateX(2px);
    }
  }

  /* Form Label */
  .form-label {
    margin-inline-end: 0.5rem;
    font-weight: 700;
    color: var(--color-ink-muted);
    font-size: var(--font-size-s);

    /* Required field indicator */
    &:has(+ [required])::after,
    &[data-required]::after {
      content: " *";
      color: var(--color-red);
    }
  }

  /* Field validation states using :has() */
  .field {
    container-type: inline-size;
  }

  /* Remove default fieldset styling for checkbox/radio wrappers */
  fieldset.field,
  fieldset.form-group {
    border: none;
    padding: 0;
    margin: 0;
    min-inline-size: 0; /* Reset fieldset min-width */
  }

  /* Field with error */
  .field:has(.form__input--invalid) .form-label {
    color: var(--color-red);
  }

  /* High contrast mode adjustments */
  @media (prefers-contrast: high) {
    .form__input {
      border-width: 2px;

      &:focus-visible {
        outline: var(--focus-ring-size) solid currentColor;
        outline-offset: var(--focus-ring-offset);
        box-shadow: none;
      }
    }
  }

  /* Reduced motion preferences */
  @media (prefers-reduced-motion: reduce) {
    .form__input {
      transition: none;

      &--invalid {
        animation: none;
      }
    }
  }

  /* Select elements styling */
  .form__input--select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23333' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 12px 8px;
    padding-inline-end: 2.5rem;
    cursor: pointer;
  }

  /* Checkbox and radio button styling */
  .form-check {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-block-size: 1.5rem;
  }

  .form-check-input {
    flex-shrink: 0;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    margin: 0;
    vertical-align: middle;
    appearance: none;
    background-color: var(--color-bg-secondary);
    border: 1px solid color-mix(in oklch, currentColor, transparent 70%);
    transition: all 0.2s ease;
    cursor: pointer;

    /* Checkbox specific */
    &[type="checkbox"] {
      border-radius: 0.25rem;

      &:checked {
        background-color: var(--color-blue-bright);
        border-color: var(--color-blue-bright);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 1rem;
      }
    }

    /* Radio button specific */
    &[type="radio"] {
      border-radius: 50%;

      &:checked {
        background-color: var(--color-blue-bright);
        border-color: var(--color-blue-bright);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Ccircle cx='10' cy='10' r='4'/%3E%3C/svg%3E");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 1rem;
      }
    }

    &:focus-visible {
      outline: var(--focus-ring-size) solid var(--color-blue-bright);
      outline-offset: var(--focus-ring-offset);
    }

    &:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }
  }

  .form-check-label {
    cursor: pointer;
    user-select: none;
  }

  /* Form error text */
  .form-error {
    display: block;
    margin-block-start: 0.25rem;
  }

  /* Form hint text */
  .form-hint {
    display: block;
    margin-block-start: 0.25rem;
  }

  /* Input group with append/prepend */
  .input-group {
    display: flex;
    align-items: stretch;
    border: var(--border);
    border-radius: var(--border-radius);
    transition:
      box-shadow 250ms,
      border-color 250ms;
  }

  .input-group:focus-within {
    box-shadow: var(--input-focus-ring);
    border-color: var(--input-focus-border-color);
  }

  .input-group .form__input {
    flex: 1;
    border: 0;
    border-radius: var(--border-radius) 0 0 var(--border-radius);
  }

  .input-group input[type="number"] {
    text-align: right;
  }

  .input-group input[type="number"]::-webkit-inner-spin-button {
    margin-left: var(--block-space-three-quarters);
  }

  .input-group .form__input:focus-visible {
    box-shadow: none;
  }

  .input-group__append {
    display: flex;
    align-items: center;
    /* Room for a Shift-revealed keycap hint beside the icon. */
    gap: 0.5ch;
    padding-inline: var(--block-space-three-quarters);
    background: var(--color-gray-light);
    border-left: var(--border);
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    color: var(--color-ink-muted);
    font-weight: 500;
  }

  /* Compact variant for inline usage (e.g., weighting inputs in lists) */
  .input-group--compact {
    display: inline-flex;
  }

  .form__input--compact {
    width: 5.5rem;
    padding: var(--block-space-three-eighths) var(--block-space-half);
    text-align: center;
    font-size: var(--font-size-s);
  }

  /* min/max/required mark a blank weighting or one outside 1-100. The group
     draws the border, as the input inside it has none. */
  .input-group:has(input[name="criterion[weighting]"]:invalid) {
    border-color: var(--color-red);
  }

  .input-group__append--compact {
    padding-inline: var(--block-space-half);
    font-size: var(--font-size-s);
  }

  /* Reset input/textarea to be invisible inside a container */
  .input-inline {
    border: 0;
    background: transparent;
    outline: none;
    field-sizing: content;
    min-width: 2ch;
    resize: none;
  }

  .form__input:has(.input-inline):focus-within {
    box-shadow: var(--input-focus-ring);
    border-color: var(--input-focus-border-color);
  }

  /* Criterion form: the price range and the price hints follow the price checkbox */
  .criterion-form:not(:has(#criterion_is_price_criterion:checked)) .criterion-form__price-only {
    display: none;
  }

  /* Dark mode: select dropdown arrow visibility */
  html[data-theme="dark"] .form__input--select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23cccccc' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .form__input--select {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23cccccc' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    }
  }
}