/**
 * @file
 * Native form fields and Drupal Form API components.
 */

/* Native controls override PureCSS's fixed light backgrounds and inset shadow. */

input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"], [type="image"]),
select,
textarea,
.pure-form :is(input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"], [type="image"]), select, textarea) {
  max-width: 100%;
  color: light-dark(#28343c, #c8cbce);
  border-color: var(--border);
  border-radius: 0;
  background-color: light-dark(#fff, #1c1e20);
  box-shadow: none;
}

.pure-form :is(input, select, textarea):focus {
  border-color: var(--primary);
  box-shadow: none;
}

.pure-form :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

select option,
select optgroup {
  color: light-dark(#28343c, #c8cbce);
  background-color: light-dark(#fff, #1c1e20);
}

/* Highlight selections in multiple-value fields in both appearances. */

select[multiple] option:checked {
  color: light-dark(#fff, #141618);
  background-color: var(--primary);
}

.pure-form :is(input[type], select, textarea)[disabled] {
  color: light-dark(#707878, #aeb2b6);
  background-color: light-dark(#eaeded, #2b2e32);
}

.pure-form :is(input, select, textarea)[readonly] {
  color: light-dark(#777, #b9bdc1);
  background-color: var(--surface);
}

.pure-form :is(input, select, textarea):focus:invalid {
  color: light-dark(#b94a48, #ffb3a4);
  border-color: light-dark(#e9322d, #ffb3a4);
}

::placeholder {
  opacity: 1;
  color: light-dark(#666, #aeb2b6);
}

fieldset {
  border: 1px solid var(--border);
}

.pure-form legend {
  color: light-dark(#333, #c8cbce);
  border-bottom-color: var(--border);
}

.pure-form-message,
.pure-form-message-inline {
  color: light-dark(#666, #aeb2b6);
}

label {
  font-weight: bold;
}

label.option {
  display: inline;
  font-weight: normal;
}

/* Form API layout. */

.form-item,
.form-actions {
  margin-block: 1em;
}

tr:is(.odd, .even) .form-item {
  margin-block: 0;
}

.form-composite > .fieldset-wrapper > .description,
.form-item .description {
  font-size: 0.85em;
}

.form-composite > legend,
.label {
  display: inline;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: bold;
}

:is(.form-checkboxes, .form-radios) .form-item {
  margin-block: 0.4em;
}

:is(.form-type-radio, .form-type-checkbox) .description {
  margin-inline-start: 2.4em;
}

form .field-multiple-table {
  margin: 0;
}

form .field-multiple-table .field-multiple-drag {
  width: 30px;
  padding-inline-end: 0;
}

form .field-multiple-table .tabledrag-handle {
  padding-inline-end: 0.5em;
}

.field-multiple-value-actions {
  display: flow-root;
}

form .field-add-more-submit {
  margin: 0.5em 0 0;
}

form .field--name-field-image .form-text {
  width: 100%;
}

.poll .form-radio,
.poll label.option {
  display: inline;
}

/* Required fields and errors retain a non-color indicator. */

.marker {
  color: light-dark(#e00, #ffb3a4);
}

.form-required::after {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-inline: 0.3em;
  content: "";
  vertical-align: super;
  background: url(../../images/icons/required.svg) center / contain no-repeat;
}

abbr.tabledrag-changed,
abbr.ajax-changed {
  border-bottom: 0;
}

.pure-form .form-item :is(input, textarea, select).error {
  border: 2px solid light-dark(#b94a48, #ffb3a4);
}

.form-item--error-message::before {
  display: inline-block;
  width: 14px;
  height: 14px;
  content: "";
  vertical-align: sub;
  background: url(../../images/icons/error.svg) center / contain no-repeat;
}

.rnd .pure-form :is(input, select, textarea) {
  border-radius: var(--control-radius);
}