@theme {
  --textarea-height: 6lh;
}

@layer base {
  fieldset {
    border: none;
  }

  textarea {
    min-height: var(--textarea-height);
    resize: vertical;
    /* stylelint-disable-next-line */
    field-sizing: normal; /* Allows textarea to auto */
  }

  /* Text inputs */
  input:where(
    [type='text'],
    [type='search'],
    [type='email'],
    [type='password'],
    [type='tel'],
    [type='url']
  ),
  textarea,
  select,
  .field {
    @apply pigment;
    @apply border-scaffold;
    @apply outline-scaffold;
    display: block;
    width: 100%;
    padding: 0.125lh 0.5lh;
    font: inherit;
    font-family: var(--input-font);
    color: var(--text-color, currentcolor);
    background-color: var(--bg-color);
  }

  /* Friendly password dots */

  /* See https://pqina.nl/blog/styling-password-field-dots/ */
  input[type='password'] {
    font-family: Verdana, sans-serif;
    letter-spacing: 0.125em;
  }

  /* disabled and readonly states */
  .disabled,
  .readonly,
  [disabled],
  [readonly] {
    opacity: 0.5;

    &:where(input) {
      /* Super simple way. Styles can be improved. */
      cursor: not-allowed;
    }

    /* Prevents users from focusing on them */
    &:focus,
    &:focus-visible {
      outline-color: transparent;
    }
  }

  /* Honeypot */
  .form-field-helper {
    display: none !important;
  }
}