/**
 * @file
 * Text input elements.
 */
/* Navigation related breakpoints */
/* Grid related breakpoints */
[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;
  -webkit-appearance: none;
          appearance: none;
}
[type=color][disabled],
[type=date][disabled],
[type=datetime-local][disabled],
[type=email][disabled],
[type=file][disabled],
[type=month][disabled],
[type=number][disabled],
[type=password][disabled],
[type=search][disabled],
[type=tel][disabled],
[type=text][disabled],
[type=time][disabled],
[type=url][disabled],
[type=week][disabled],
textarea[disabled] {
  color: var(--form-element-border);
  background-color: var(--form-element-disabled-bg);
}
[type=color].error,
[type=date].error,
[type=datetime-local].error,
[type=email].error,
[type=file].error,
[type=month].error,
[type=number].error,
[type=password].error,
[type=search].error,
[type=tel].error,
[type=text].error,
[type=time].error,
[type=url].error,
[type=week].error,
textarea.error {
  border: solid 2px var(--color--red);
}
[type=color].error:focus,
[type=date].error:focus,
[type=datetime-local].error:focus,
[type=email].error:focus,
[type=file].error:focus,
[type=month].error:focus,
[type=number].error:focus,
[type=password].error:focus,
[type=search].error:focus,
[type=tel].error:focus,
[type=text].error:focus,
[type=time].error:focus,
[type=url].error:focus,
[type=week].error:focus,
textarea.error:focus {
  outline-color: var(--color--red);
  outline-offset: -2px;
}
[type=color].form-element--small,
[type=date].form-element--small,
[type=datetime-local].form-element--small,
[type=email].form-element--small,
[type=file].form-element--small,
[type=month].form-element--small,
[type=number].form-element--small,
[type=password].form-element--small,
[type=search].form-element--small,
[type=tel].form-element--small,
[type=text].form-element--small,
[type=time].form-element--small,
[type=url].form-element--small,
[type=week].form-element--small,
textarea.form-element--small {
  min-height: var(--sp2-5);
}
@media (min-width: 31.25rem) {
  [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 {
    width: auto;
  }
}

[type=date] {
  /* Ensure that date field isn't larger than other fields. */
}
[type=date]::-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;
}