/**
 * @file
 * Text input elements.
 */

[type='color'],
[type='date'],
[type='datetime-local'],
[type='email'],
[type='file'],
[type='month'],
[type='number'],
[type='password'],
[type='search'],
[type='tel'],
[type='text'],
[type='time'],
[type='url'],
[type='week'],
textarea {
  --form-element-bg: var(--color--white);
  --form-element-disabled-bg: var(--color--night-90);

  width: 100%;
  max-width: 100%;
  min-height: var(--sp3);
  padding: 0 var(--sp);
  color: var(--color--gray-0);
  border: 1px solid var(--form-element-border);
  border-radius: var(--border-radius);
  background-color: var(--form-element-bg);
  font-family: inherit;
  font-size: inherit;
  appearance: none;

  &[disabled] {
    color: var(--form-element-border);
    background-color: var(--form-element-disabled-bg);
  }

  &.error {
    border: solid 2px var(--color--red);

    &:focus {
      outline-color: var(--color--red);
      outline-offset: -2px;
    }
  }

  &.form-element--small {
    min-height: var(--sp2-5);
  }

  @container style(--sm: true) {
    width: auto;
  }
}

[type='date'] {
  /* Ensure that date field isn't larger than other fields. */
  &::-webkit-datetime-edit-fields-wrapper {
    padding-block: 0;
    padding-inline-start: 0;
    padding-inline-end: 0;
  }
}

[type='file'] {
  height: auto;
  padding-block: var(--sp0-75);
}

[type='color'] {
  width: var(--sp3);
  padding: 0;
}