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

  /* Form Actions Bar */
  .form-actions {
    display: flex;
    justify-content: flex-end !important;
    align-items: center;
    gap: 0.5rem;
    margin-block-end: 1rem;

    /* Container query for responsive actions */
    container-type: inline-size;
    container-name: form-actions;
  }

  /* Stack form actions on small containers */
  @container form-actions (max-width: 400px) {
    .form-actions {
      flex-direction: column;
      align-items: stretch;
    }

    .form-actions > * {
      inline-size: 100%;
    }
  }

  /* Main Form Container */
  .form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    container-type: inline-size;
    container-name: form;
  }

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

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

  /* Allow flex layout for inline editing */
  .form__input.flex {
    display: flex !important;
  }

  /* 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: 0 0 0 2px var(--color-blue-bright);
    border-color: color-mix(in oklch, var(--color-blue-bright), transparent 50%);
  }

  /* Invalid state */
  .form__input--invalid {
    border-color: var(--color-red);
    /* Shake animation on invalid */
    animation: 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,
      0 0 0 2px var(--color-blue-bright);
  }

  /* Shake animation for invalid inputs */
  @keyframes 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);
  }

  /* Responsive form layout using container queries */
  @container form (max-width: 600px) {
    .form {
      flex-direction: column;

      &__group {
        flex: none;
        inline-size: 100%;
      }
    }
  }

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

      &:focus-visible {
        outline: 2px solid currentColor;
        outline-offset: 2px;
        box-shadow: none;
      }
    }
  }

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

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

  /* Modern form field with floating label (enhancement) */
  .form-field-modern {
    position: relative;
    margin-block: 1rem;

    & input,
    & textarea {
      inline-size: 100%;
      padding: 1rem 0.75rem 0.5rem;
      border: var(--border);
      border-radius: var(--border-radius);
      outline: none;
      transition: border-color 0.2s ease;

      &:focus-visible {
        border-color: var(--color-blue-bright);
      }
    }

    & label {
      position: absolute;
      inset-inline-start: 0.75rem;
      inset-block-start: 50%;
      transform: translateY(-50%);
      transition: all 0.2s ease;
      pointer-events: none;
      color: color-mix(in oklch, currentColor, transparent 40%);
    }

    /* Float label when input has value or focus */
    &:has(input:focus, input:not(:placeholder-shown)),
    &:has(textarea:focus, textarea:not(:placeholder-shown)) {
      & label {
        inset-block-start: 0.25rem;
        font-size: 0.75rem;
        transform: translateY(0);
        color: var(--color-blue-bright);
      }
    }
  }

  /* 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;
  }

  /* File input styling */
  .form__input--file {
    padding: 0.5rem;
    cursor: pointer;

    &::file-selector-button {
      padding: 0.375rem 0.75rem;
      margin-inline-end: 0.5rem;
      background: var(--color-blue-bright);
      color: white;
      border: none;
      border-radius: var(--border-radius);
      cursor: pointer;
      transition: opacity 0.2s ease;

      &:hover {
        opacity: 0.9;
      }
    }
  }

  /* Range input styling */
  .form__input--range {
    padding: 0;
    background: transparent;
    cursor: pointer;

    &::-webkit-slider-track {
      block-size: 4px;
      background: color-mix(in oklch, var(--color-blue-bright), transparent 80%);
      border-radius: 2px;
    }

    &::-webkit-slider-thumb {
      appearance: none;
      inline-size: 16px;
      block-size: 16px;
      background: var(--color-blue-bright);
      border-radius: 50%;
      margin-block-start: -6px;
      cursor: pointer;
    }

    &::-moz-range-track {
      block-size: 4px;
      background: color-mix(in oklch, var(--color-blue-bright), transparent 80%);
      border-radius: 2px;
    }

    &::-moz-range-thumb {
      border: none;
      inline-size: 16px;
      block-size: 16px;
      background: var(--color-blue-bright);
      border-radius: 50%;
      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: 2px solid var(--color-blue-bright);
      outline-offset: 2px;
    }

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

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

  /* Switch/toggle styling */
  .form-switch {
    padding-inline-start: 2.5rem;
  }

  .form-switch-input {
    inline-size: 2rem;
    block-size: 1.25rem;
    background-color: color-mix(in oklch, currentColor, transparent 70%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='white'/%3E%3C/svg%3E");
    background-position: left center;
    background-repeat: no-repeat;
    border-radius: 2rem;
    transition:
      background-position 0.2s ease,
      background-color 0.2s ease;
    appearance: none;
    cursor: pointer;

    &:checked {
      background-color: var(--color-blue-bright);
      background-position: right center;
    }

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

  /* Error notification */
  .form-error-notification {
    padding: 1rem;
    margin-block-end: 1rem;
    background-color: color-mix(
      in oklch,
      var(--color-red),
      transparent 90%
    );
    border: 1px solid var(--color-red);
    border-radius: var(--border-radius);
    color: var(--color-red);
  }

  /* 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: 0 0 0 2px var(--color-blue-bright);
    border-color: color-mix(in oklch, var(--color-blue-bright), transparent 50%);
  }

  .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(--space-s);
  }

  .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(--space-s);
    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: 4rem;
    padding: var(--space-xxs) var(--space-xs);
    text-align: center;
    font-size: var(--font-size-s);
  }

  .input-group__append--compact {
    padding-inline: var(--space-xs);
    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: 0 0 0 2px var(--color-blue-bright);
    border-color: color-mix(in oklch, var(--color-blue-bright), transparent 50%);
  }

  /* Horizontal form specific */
  .form__group--horizontal {
    display: flex;
    align-items: flex-start;
    gap: 1rem;

    & .form-label--horizontal {
      flex: 0 0 25%;
      padding-block-start: 0.5rem;
      text-align: end;
    }

    @container form (max-width: 600px) {
      flex-direction: column;

      & .form-label--horizontal {
        flex: none;
        text-align: start;
      }
    }
  }

  /* 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");
    }
  }
}