/*
 * Form Input Components
 * Text inputs, selects, textareas, form groups, labels
 * Uses CSS nesting and component-level custom properties
 */

@layer components {
  /* Base input with customizable properties */
  .input {
    --input-padding-block: var(--block-space-3quarter);
    --input-padding-inline: var(--block-space);
    --input-font-size: var(--text-normal);
    --input-border-color: var(--color-gray-medium);
    --input-bg: var(--color-white);

    display: block;
    width: 100%;
    padding: var(--input-padding-block) var(--input-padding-inline);
    font-size: var(--input-font-size);
    line-height: var(--leading-normal);
    color: var(--color-gray-darker);
    background-color: var(--input-bg);
    border: 1px solid var(--input-border-color);
    border-radius: var(--radius);

    &::placeholder {
      color: var(--color-gray);
    }

    &:focus {
      outline: none;
      --input-border-color: var(--color-gray-dark);
      box-shadow: 0 0 0 var(--focus-ring);
    }

    &:disabled {
      --input-bg: var(--color-gray-lighter);
    }
  }

  /* Large: prominent public-facing forms (login, checkout, landing CTA) */
  .input--lg {
    --input-padding-block: var(--block-space-3quarter);
    --input-padding-inline: var(--block-space);
    --input-font-size: var(--text-large);
  }

  /* Solid border variant */
  .input--solid {
    border-style: solid;
  }

  /* Error state */
  .input--error {
    --input-border-color: var(--color-red);

    &:focus {
      box-shadow: 0 0 0 var(--focus-ring-size) var(--color-red);
    }
  }

  /* Success state */
  .input--success {
    --input-border-color: var(--color-green);
  }

  /* Select */
  .select {
    --select-padding-block: var(--block-space-half);
    --select-padding-inline: var(--block-space-3quarter);
    --select-font-size: var(--text-normal);
    --select-border-color: var(--color-gray-medium);
    --caret-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b6b6b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    --caret-icon-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23c8c8c8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");

    display: block;
    width: 100%;
    padding: var(--select-padding-block) var(--select-padding-inline);
    padding-right: var(--block-space-double);
    font-size: var(--select-font-size);
    line-height: var(--leading-normal);
    color: var(--color-gray-darker);
    background-color: var(--color-white);
    background-image: var(--caret-icon);
    background-position: right var(--block-space-half) center;
    background-repeat: no-repeat;
    background-size: var(--icon-md);
    border: 1px solid var(--select-border-color);
    border-radius: var(--radius);
    appearance: none;
    cursor: pointer;

    &:focus {
      outline: none;
      --select-border-color: var(--color-gray-dark);
      box-shadow: 0 0 0 var(--focus-ring);
    }

    /* Inline dark mode — lighter caret for dark backgrounds */
    html[data-theme="dark"] & { --caret-icon: var(--caret-icon-dark); }
    @media (prefers-color-scheme: dark) {
      html:not([data-theme]) & { --caret-icon: var(--caret-icon-dark); }
    }
  }

  /* Large: prominent public-facing forms (login, checkout, landing CTA) */
  .select--lg {
    --select-padding-block: var(--block-space-3quarter);
    --select-padding-inline: var(--block-space);
    --select-font-size: var(--text-large);
  }

  /* Small: inline filters in admin headers, toolbars */
  .select--sm {
    --select-padding-block: var(--block-space-quarter);
    --select-padding-inline: var(--block-space-half);
    --select-font-size: var(--text-small);

    width: auto;
    padding-right: var(--block-space-3quarter);
    background-size: var(--icon-sm);
  }

  /* Textarea */
  .textarea {
    --textarea-padding-block: var(--block-space-half);
    --textarea-padding-inline: var(--block-space-3quarter);
    --textarea-font-size: var(--text-normal);
    --textarea-border-color: var(--color-gray-medium);

    display: block;
    width: 100%;
    min-height: var(--textarea-min-height);
    padding: var(--textarea-padding-block) var(--textarea-padding-inline);
    font-size: var(--textarea-font-size);
    line-height: var(--leading-relaxed);
    color: var(--color-gray-darker);
    background-color: var(--color-white);
    border: 1px solid var(--textarea-border-color);
    border-radius: var(--radius);
    resize: vertical;
    field-sizing: content; /* Auto-resize with content */
    max-block-size: 50vh;

    &:focus {
      outline: none;
      --textarea-border-color: var(--color-gray-dark);
      box-shadow: 0 0 0 var(--focus-ring);
    }
  }

  /* Large: prominent public-facing forms (login, checkout, landing CTA) */
  .textarea--lg {
    --textarea-padding-block: var(--block-space-3quarter);
    --textarea-padding-inline: var(--block-space);
    --textarea-font-size: var(--text-large);
  }

  /* Checkbox/Radio wrapper */
  .checkbox-group,
  .radio-group {
    display: flex;
    align-items: center;
    gap: var(--inline-space);
  }

  .checkbox,
  .radio {
    width: var(--icon-md);
    height: var(--icon-md);
    cursor: pointer;
    accent-color: var(--color-gray-dark);
  }

  /* Label */
  .label {
    display: block;
    margin-bottom: var(--block-space-quarter);
    font-size: var(--text-small);
    color: var(--color-gray-darker);

    &--required::after {
      content: " *";
      color: var(--color-red);
    }
  }

  /* Form group */
  .form-group {
    margin-bottom: var(--block-space);

    &:last-child {
      margin-bottom: 0;
    }
  }

  /* Form helper text */
  .form-help {
    margin-top: var(--block-space-quarter);
    font-size: var(--text-normal);
    color: var(--color-gray-dark);
  }

  /* Form error message */
  .form-error {
    margin-top: var(--block-space-quarter);
    font-size: var(--text-normal);
    color: var(--color-red);
  }

  /* Form row (inline form elements) */
  .form-row {
    display: flex;
    gap: var(--block-space-half);
    align-items: stretch;

    & > * {
      flex: 1;
      min-width: 0;
    }

    & > .btn {
      flex: 0 0 auto;
    }
  }

  /* Form section */
  .form-section {
    padding-bottom: var(--block-space-double);
    margin-bottom: var(--block-space-double);
    border-bottom: var(--border-standard);

    &:last-child {
      padding-bottom: 0;
      margin-bottom: 0;
      border-bottom: none;
    }
  }

  /* Monospace variant (URLs, codes, tokens) */
  .input--mono {
    font-family: var(--font-mono, ui-monospace, monospace);
  }

  /* Magic link code input (centered, large, monospaced) */
  .input--magic-code {
    text-align: center;
    font-size: clamp(1.625rem, 0.5vw + 1.375rem, 2rem);
    font-family: var(--font-mono, ui-monospace, monospace);
    letter-spacing: 0.25em;
    padding: var(--block-space);
    text-transform: uppercase;
  }

/* Autofill styling - Override browser's yellow/blue autofill background */
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  textarea:-webkit-autofill,
  textarea:-webkit-autofill:hover,
  textarea:-webkit-autofill:focus,
  select:-webkit-autofill,
  select:-webkit-autofill:hover,
  select:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--color-gray-darker);
    -webkit-box-shadow: 0 0 0px 1000px var(--color-white) inset;
    transition: background-color 5000s ease-in-out 0s;
  }

}