/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/**
 * @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 {
  width: 100%;
  max-width: 100%;
  min-height: var(--sp3);
  padding: 0 var(--sp);
  color: var(--color-text-neutral-loud);
  border: 1px solid var(--color--gray-60);
  border-radius: var(--border-radius);
  background-color: var(--color--white);
  font-family: inherit;
  font-size: inherit;
  -webkit-appearance: none;
  appearance: none;
}

:is([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):focus {
  border: solid 2px var(--color--primary-50);
  outline: solid 2px var(--color--primary-50);
}

@supports (outline-style: double) {
  :is([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):focus {
    border-width: 1px;
    outline-width: 6px;
    outline-style: double;
    outline-offset: -1px;
  }
}

[disabled]:is([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) {
  color: var(--color--gray-60);
  background-color: var(--color--gray-100);
}

.error:is([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) {
  border: solid 2px var(--color--red);
}

.error:is([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):focus {
  outline-color: var(--color--red);
  outline-offset: -2px;
}

.error:is([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) + .ck-editor > .ck-editor__main {
  border: solid 2px var(--color--red);
}

.form-element--small:is([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) {
  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;
  }
}

/* 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;
}