/*
 * 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(--sp2);
  padding: 0 var(--sp);
  color: var(--color-text-neutral-loud);
  /* border: 1px solid var(--color--gray-60); */
  border: 1px solid var(--border-dark);
  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;
}