/**
 * @file
 * Form fields: label, control, help, error, required and optional markers.
 *
 * Control styles are scoped with :where() and skip the widgets that style
 * themselves: the pickers' natives and search, the phone number input (inside
 * .gpp__container) and everything in the CAPTCHA.
 */

:where(.gdrfad-dds) .dds-field,
.gdrfad-dds-embedded .dds-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-inline-size: 0;
}

/* Under the label of a field that shares a row (form-element--dds.html.twig):
 * the same column and spacing as the field itself. */
:where(.gdrfad-dds) .dds-field__body,
.gdrfad-dds-embedded .dds-field__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-inline-size: 0;
}

:where(.gdrfad-dds) .dds-field__label,
.gdrfad-dds-embedded .dds-field__label {
  color: var(--surface-on-surface);
  font-size: var(--font-size-body);
  font-weight: 700;
  line-height: var(--line-height-body);
}

:where(.gdrfad-dds) .dds-field--error > .dds-field__label,
.gdrfad-dds-embedded .dds-field--error > .dds-field__label {
  color: var(--error-error);
}

/* Required: an asterisk that screen readers skip (the alt text after the
 * slash is empty; engines without it keep the first declaration).
 * A site theme may draw its own on the same ::after (Classy, Starterkit,
 * Seven: a 6px box with a star image). Its box and image are reset here, or
 * the label shows two asterisks; the portal's selector is one class stronger
 * so a two-class theme rule loses too. Display is left alone: Webform hides
 * the marker on radio and checkbox options with display: none. Not a choice
 * card's label: its ::after is the card's click area (choice.css). */
:where(.gdrfad-dds) .form-required::after,
.gdrfad-dds-embedded .form-required.form-required:not(.dds-choice > label)::after {
  content: "*";
  content: "*" / "";
  inline-size: auto;
  block-size: auto;
  margin: 0;
  margin-inline-start: 2px;
  vertical-align: baseline;
  background: none;
  mask: none;
  color: var(--error-error);
}

:where(.gdrfad-dds) .dds-optional,
.gdrfad-dds-embedded .dds-optional {
  color: var(--surface-on-surface-variant);
  font-weight: 400;
}

:where(.gdrfad-dds) .form-required .dds-optional,
.gdrfad-dds-embedded .form-required .dds-optional {
  display: none;
}

:where(.gdrfad-dds) .dds-field__help,
:where(.gdrfad-dds) .dds-field .description,
.gdrfad-dds-embedded .dds-field__help,
.gdrfad-dds-embedded .dds-field .description {
  color: var(--surface-on-surface-variant);
  font-size: var(--font-size-help);
  line-height: var(--line-height-help);
}

:where(.gdrfad-dds) .dds-field__help--line,
.gdrfad-dds-embedded .dds-field__help--line {
  display: block;
}

/* Errors: this theme's, and clientside validation's <strong> (on until B3
 * sets form_novalidate). With Inline Form Errors on, clientside validation
 * wraps its <strong class="error"> in div.form-item--error-message instead
 * (the tracker forms), so that pair gets the same look and icon. */
:where(.gdrfad-dds) .dds-field__error,
:where(.gdrfad-dds) strong.error.form-item--error-message,
:where(.gdrfad-dds) .form-item--error-message > strong.error,
.gdrfad-dds-embedded .dds-field__error,
.gdrfad-dds-embedded strong.error.form-item--error-message,
.gdrfad-dds-embedded .form-item--error-message > strong.error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--error-error);
  font-size: var(--font-size-help);
  font-weight: 700;
  line-height: var(--line-height-help);
}

:where(.gdrfad-dds) .dds-field__error-icon,
.gdrfad-dds-embedded .dds-field__error-icon {
  inline-size: 16px;
  block-size: 16px;
  margin-block-start: 0;
}

/* The alert-circle icon (gdrfad_core), drawn in the text colour. */
:where(.gdrfad-dds) .form-item--error-message > strong.error::before,
.gdrfad-dds-embedded .form-item--error-message > strong.error::before {
  content: "";
  flex: none;
  inline-size: 16px;
  block-size: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5M12 16.5h.01'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5M12 16.5h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (forced-colors: active) {
  :where(.gdrfad-dds) .form-item--error-message > strong.error::before,
  .gdrfad-dds-embedded .form-item--error-message > strong.error::before {
    background: CanvasText;
  }
}

/* Controls. */
:where(.gdrfad-dds) :where(.dds-field) :is( input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="reset"], [type="image"], [type="file"], [type="hidden"], [type="range"], [type="color"]), select, textarea ):not(.gcp__native, .gpp__native, .gpp__number, .gdds-dropdown__search, .gdrfad-captcha *, .gdds-field *),
.gdrfad-dds-embedded :where(.dds-field) :is( input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="reset"], [type="image"], [type="file"], [type="hidden"], [type="range"], [type="color"]), textarea ):not(.gcp__native, .gpp__native, .gpp__number, .gdds-dropdown__search, .gdrfad-captcha *, .gdds-field *) {
  display: block;
  inline-size: 100%;
  min-block-size: 56px;
  margin: 0;
  padding-block: 0;
  padding-inline: var(--padding-padding-lg);
  border: 1px solid var(--field-outline);
  border-radius: var(--radius-xs);
  outline: 2px solid transparent;
  background: var(--surface-surface);
  color: var(--surface-on-surface);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}

:where(.gdrfad-dds) :where(.dds-field) textarea:not(.gdrfad-captcha *, .gdds-field *),
.gdrfad-dds-embedded :where(.dds-field) textarea:not(.gdrfad-captcha *, .gdds-field *) {
  min-block-size: 120px;
  padding-block: var(--padding-padding-md);
  resize: vertical;
}

:where(.gdrfad-dds) :where(.dds-field) :is(input, select, textarea):not(.gcp__native, .gpp__native, .gpp__number, .gdds-dropdown__search, .gdrfad-captcha *, .gdds-field *)::placeholder,
.gdrfad-dds-embedded :where(.dds-field) :is(input, textarea):not(.gcp__native, .gpp__native, .gpp__number, .gdds-dropdown__search, .gdrfad-captcha *, .gdds-field *)::placeholder {
  color: var(--surface-on-surface-variant);
  opacity: 1;
}

:where(.gdrfad-dds) :where(.dds-field) :is(input, select, textarea):not(.gcp__native, .gpp__native, .gpp__number, .gdds-dropdown__search, .gdrfad-captcha *, .gdds-field *):hover,
.gdrfad-dds-embedded :where(.dds-field) :is(input, textarea):not(.gcp__native, .gpp__native, .gpp__number, .gdds-dropdown__search, .gdrfad-captcha *, .gdds-field *):hover {
  border-color: var(--surface-on-surface-variant);
}

:where(.gdrfad-dds) :where(.dds-field) :is(input, select, textarea):not(.gcp__native, .gpp__native, .gpp__number, .gdds-dropdown__search, .gdrfad-captcha *, .gdds-field *):focus,
.gdrfad-dds-embedded :where(.dds-field) :is(input, textarea):not(.gcp__native, .gpp__native, .gpp__number, .gdds-dropdown__search, .gdrfad-captcha *, .gdds-field *):focus {
  border-color: var(--primary-primary);
  box-shadow: var(--focus-ring);
}

/* A picker's button focused by script as the first failed question
 * (gdrfad_careers inline-errors.js): ringed even after a click. Fields
 * already ring on any :focus; choice cards in choice.css. */
:where(.gdrfad-dds) button[data-gdrfad-error-focus]:focus,
.gdrfad-dds-embedded button[data-gdrfad-error-focus]:focus {
  outline: 2px solid var(--primary-primary);
  outline-offset: 2px;
}

/* Error: 2px border; one less pixel of padding so the text does not move. */
:where(.gdrfad-dds) :where(.dds-field) :is(input, select, textarea):not(.gcp__native, .gpp__native, .gpp__number, .gdds-dropdown__search, .gdrfad-captcha *, .gdds-field *):is(.error, [aria-invalid="true"]),
.gdrfad-dds-embedded :where(.dds-field) :is(input, textarea):not(.gcp__native, .gpp__native, .gpp__number, .gdds-dropdown__search, .gdrfad-captcha *, .gdds-field *):is(.error, [aria-invalid="true"]) {
  padding-inline: 15px;
  border-width: 2px;
  border-color: var(--error-error);
}

:where(.gdrfad-dds) :where(.dds-field) :is(input, select, textarea):not(.gcp__native, .gpp__native, .gpp__number, .gdds-dropdown__search, .gdrfad-captcha *, .gdds-field *):disabled,
.gdrfad-dds-embedded :where(.dds-field) :is(input, textarea):not(.gcp__native, .gpp__native, .gpp__number, .gdds-dropdown__search, .gdrfad-captcha *, .gdds-field *):disabled {
  border-color: transparent;
  background: var(--state-layers-disabled);
  color: var(--state-layers-on-disabled);
  cursor: not-allowed;
}

/* Embedded, dropdowns are bare: the site's theme styles them (DdsHooks keeps
 * the design's select template out). Its dropdown is drawn full width with
 * its arrow inside the padding, so Day / Month / Year share the row here, or
 * the arrow sits on the text of a select only as wide as its text. One class
 * stronger than Webform's .form-item.form-type-datelist .container-inline,
 * which arrives later with the Ajax step and would win the tie.
 * Hand-written: embedded only, the staff theme keeps the design's dropdown. */
.gdrfad-dds-embedded .dds-field--datelist .container-inline.form-items-inline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-gap-sm);
}

.gdrfad-dds-embedded .dds-field--datelist .container-inline select {
  inline-size: 100%;
}

/* A long answer (an exemption reason) never runs under the site's arrow. The
 * site draws it at the end of the text box (background-origin: content-box,
 * position var(--icon-dir)), where the text reaches too. The arrow keeps its
 * place, now measured from the border, and the text stops short of it.
 * Hand-written: embedded only. */
.gdrfad-dds-embedded select.form-select {
  padding-inline-end: calc(var(--padding-padding-lg, 16px) + 24px);
  background-origin: padding-box;
  background-position: right var(--padding-padding-lg, 16px) center;
}

[dir="rtl"] .gdrfad-dds-embedded select.form-select {
  background-position: left var(--padding-padding-lg, 16px) center;
}

/* Fieldsets (radio / checkbox groups, composites). */
:where(.gdrfad-dds) .dds-fieldset,
.gdrfad-dds-embedded .dds-fieldset {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

:where(.gdrfad-dds) .dds-fieldset__legend,
.gdrfad-dds-embedded .dds-fieldset__legend {
  display: block;
  margin-block-end: var(--gap-gap-sm);
  padding: 0;
}

:where(.gdrfad-dds) .dds-fieldset > .fieldset-wrapper,
.gdrfad-dds-embedded .dds-fieldset > .fieldset-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--gap-gap-sm);
}

:where(.gdrfad-dds) .dds-fieldset--error > .dds-fieldset__legend .dds-field__label,
.gdrfad-dds-embedded .dds-fieldset--error > .dds-fieldset__legend .dds-field__label {
  color: var(--error-error);
}

:where(.gdrfad-dds) .field-prefix,
:where(.gdrfad-dds) .field-suffix,
.gdrfad-dds-embedded .field-prefix,
.gdrfad-dds-embedded .field-suffix {
  color: var(--surface-on-surface-variant);
  font-size: var(--font-size-caption);
}

/* Uploaded file chip. */
:where(.gdrfad-dds) .dds-file,
.gdrfad-dds-embedded .dds-file {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-gap-sm);
  max-inline-size: 100%;
  min-inline-size: 0;
}

:where(.gdrfad-dds) .dds-file__icon,
.gdrfad-dds-embedded .dds-file__icon {
  color: var(--primary-primary);
}

:where(.gdrfad-dds) .dds-file__name,
.gdrfad-dds-embedded .dds-file__name {
  overflow: hidden;
  min-inline-size: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:where(.gdrfad-dds) .dds-file__size,
.gdrfad-dds-embedded .dds-file__size {
  flex: none;
  color: var(--surface-on-surface-variant);
  font-size: var(--font-size-caption);
}