/*
 * Form input styles.
 * Text inputs, selects, textareas, checkboxes, switches.
 * Uses BEM naming convention.
 */
@layer components {
  .input {
    --input-padding: 0.75em 1em;
    --input-radius: 0.5em;
    --input-border-color: var(--input-border-on-surface-1, var(--color-ink-lighter));
    --input-bg: var(--input-bg-on-surface-1, var(--color-ink-lightest));

    background: var(--input-bg);
    border: 1px solid var(--input-border-color);
    border-radius: var(--input-radius);
    color: var(--color-ink);
    font-size: max(16px, 1em);
    padding: var(--input-padding);
    transition: border-color 150ms var(--ease-out-expo),
                box-shadow 150ms var(--ease-out-expo);

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

    &:hover {
      --input-border-color: var(--color-ink-light);
    }

    &:focus {
      --input-border-color: var(--color-link);

      outline: none;
      box-shadow: 0 0 0 2px oklch(var(--lch-blue-lighter));
    }

    &:disabled {
      background: var(--color-ink-lighter);
      cursor: not-allowed;
      opacity: 0.6;
    }
  }

  /*
   * Input with error state
   */
  .input--error {
    --input-border-color: var(--color-negative);

    &:focus {
      --input-border-color: var(--color-negative);

      box-shadow: 0 0 0 2px oklch(var(--lch-red-lighter));
    }
  }

  /*
   * Textarea
   */
  .input--textarea {
    min-block-size: 6em;
    resize: vertical;
  }

  /*
   * Select dropdown
   */
  .input--select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-position: right 0.75em center;
    background-repeat: no-repeat;
    padding-inline-end: 2.5em;
  }

  /*
   * Form field wrapper
   */
  .field {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
  }

  .field__label {
    font-size: var(--text-small);
    font-weight: 500;
  }

  .field__hint {
    color: var(--color-ink-dark);
    font-size: var(--text-x-small);
  }

  .field__error {
    color: var(--color-negative);
    font-size: var(--text-x-small);
  }

  /*
   * Form component - wrapper for form elements
   */
  .form {
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
  }

  .form__field {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
  }

  .form__label {
    font-size: var(--text-small);
    font-weight: 600;
  }

  .form__input,
  .form__select,
  .form__textarea {
    background: var(--input-bg-on-surface-1, var(--color-ink-lightest));
    border: 1px solid var(--input-border-on-surface-1, var(--color-ink-lighter));
    border-radius: 0.5em;
    color: var(--color-ink);
    font-family: inherit;
    font-size: max(16px, 1em);
    padding: 0.75em 1em;
    transition: border-color 150ms var(--ease-out-expo),
                box-shadow 150ms var(--ease-out-expo);
    inline-size: 100%;

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

    &:hover {
      border-color: var(--color-ink-light);
    }

    &:focus {
      border-color: var(--color-link);
      outline: none;
      box-shadow: 0 0 0 2px oklch(var(--lch-blue-lighter));
    }
  }

  .form__select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-position: right 0.75em center;
    background-repeat: no-repeat;
    padding-inline-end: 2.5em;
  }

  .form__textarea {
    min-block-size: 6em;
    resize: vertical;
  }

  .form__hint {
    color: var(--color-ink-dark);
    font-size: var(--text-x-small);
  }

  .form__error {
    color: var(--color-negative);
    font-size: var(--text-x-small);
  }

  .form__actions {
    display: flex;
    gap: var(--inline-space);
    justify-content: flex-end;
    margin-block-start: var(--block-space);
  }

  .form__file-input {
    font-size: var(--text-small);
  }

  .form__avatar-upload {
    align-items: center;
    display: flex;
    gap: var(--inline-space);
  }

  .form__avatar-preview {
    flex-shrink: 0;
  }

  .form__avatar-image,
  .form__avatar-initials {
    block-size: 3rem;
    border-radius: 50%;
    display: block;
    inline-size: 3rem;
    object-fit: cover;
  }

  .form__avatar-initials {
    align-items: center;
    color: var(--color-white);
    display: flex;
    font-weight: 700;
    justify-content: center;
  }
}