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

/* Bootstrap-compatible input & textarea styles */

input[type="color"],
input[type="date"],
input[type="datetime-local"],
input[type="email"],
input[type="file"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[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;
  appearance: none;
}

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

input[type="color"] {
  width: 2rem;
  padding: 0;
}

input:focus,
textarea:focus {
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

input:disabled,
textarea:disabled {
  background-color: #e9ecef;
  color: #6c757d;
  cursor: not-allowed;
}

input.error,
textarea.error {
  border-color: #dc3545;
}

input.error:focus,
textarea.error:focus {
  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
  outline: none;
}

input.error + .ck-editor > .ck-editor__main,
textarea.error + .ck-editor > .ck-editor__main {
  border: 2px solid #dc3545;
}

/* Small size override */
.form-element--small input,
.form-element--small textarea {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}

@media (min-width: 31.25rem) {
  input[type="file"].form-control {
    width: auto;
    max-width: 100%;
  }
}

@media (min-width: 31.25rem) {
  input[type="color"].form-control,
  input[type="date"].form-control,
  input[type="datetime-local"].form-control,
  input[type="email"].form-control,
  input[type="file"].form-control,
  input[type="month"].form-control,
  input[type="number"].form-control,
  input[type="password"].form-control,
  input[type="search"].form-control,
  input[type="tel"].form-control,
  input[type="text"].form-control,
  input[type="time"].form-control,
  input[type="url"].form-control,
  input[type="week"].form-control,
  textarea.form-control  {
      width: auto;
  }
}