/*
 * Form styles
 * Input fields, labels, and form layout
 */

@layer components {
  /* Form groups */
  .form-group {
    margin-block-end: var(--space-4);

    & label {
      display: block;
      margin-block-end: var(--space-1);
      font-size: var(--text-sm);
      font-weight: var(--font-medium);
      color: var(--color-ink);
    }
  }

  /* Text inputs */
  .form-input {
    display: block;
    inline-size: 100%;
    padding: var(--space-2_5) var(--space-3);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-ink);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);

    &:focus {
      outline: none;
      border-color: var(--color-focus);
      box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-focus) 20%, transparent);
    }

    &::placeholder {
      color: var(--color-ink-subtle);
    }

    &:disabled {
      background-color: var(--color-surface-muted);
      cursor: not-allowed;
    }
  }

  /* Code input (for verification codes) */
  .form-input-code {
    font-family: var(--font-mono);
    font-size: var(--text-2xl);
    text-align: center;
    letter-spacing: 0.25em;
  }

  /* Monospace input (for API keys, secrets, etc.) */
  .form-input-mono {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
  }

  /* Form actions */
  .form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-block-start: var(--space-6);
  }

  /* Textarea */
  .form-textarea {
    display: block;
    inline-size: 100%;
    min-block-size: 6rem;
    padding: var(--space-2_5) var(--space-3);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-ink);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    resize: vertical;
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);

    &:focus {
      outline: none;
      border-color: var(--color-focus);
      box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-focus) 20%, transparent);
    }
  }

  /* Select */
  .form-select {
    display: block;
    inline-size: 100%;
    padding: var(--space-2_5) var(--space-3);
    padding-inline-end: var(--space-8);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-ink);
    background-color: var(--color-surface);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right var(--space-2) center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    appearance: none;
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);

    &:focus {
      outline: none;
      border-color: var(--color-focus);
      box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-focus) 20%, transparent);
    }
  }

  .form-select-sm {
    padding: var(--space-1_5) var(--space-2);
    padding-inline-end: var(--space-7);
    font-size: var(--text-sm);
  }

  /* Checkbox and Radio */
  .form-checkbox,
  .form-radio {
    inline-size: 1rem;
    block-size: 1rem;
    color: var(--color-primary);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;

    &:checked {
      background-color: var(--color-primary);
      border-color: var(--color-primary);
    }

    &:focus {
      outline: none;
      box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-focus) 20%, transparent);
    }
  }

  .form-radio {
    border-radius: var(--radius-full);
  }

  /* Inline checkbox/radio with label */
  .form-check {
    display: flex;
    align-items: center;
    gap: var(--space-2);

    & label {
      margin: 0;
      font-weight: var(--font-normal);
      cursor: pointer;
    }
  }

  /* Disabled form group state */
  .form-group.disabled {
    opacity: 0.5;
    pointer-events: none;

    & label,
    & .form-check label {
      cursor: not-allowed;
    }
  }

  /* Help text */
  .form-help {
    margin-block-start: var(--space-1);
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
  }

  /* Error state */
  .form-error {
    margin-block-start: var(--space-1);
    font-size: var(--text-sm);
    color: var(--color-negative);
  }

  .form-input:invalid:not(:placeholder-shown),
  .form-input.is-invalid {
    border-color: var(--color-negative);
  }
}