/**
 * @file
 * Country and phone pickers in this theme: the field outline and fill of the
 * other fields. Loaded through libraries-extend; the module is not edited.
 *
 * The module's rules use !important at up to 0,2,1, so these are "html …"
 * with !important, and every state is declared again at a higher weight, or
 * the new idle border would beat it. One :has() per rule: an unsupported
 * :has() drops the whole selector list. Height (56px), tabindex and the
 * clipped natives are left alone.
 */

html:where(.gdrfad-dds) .gcp button.gcp__control,
.gdrfad-dds-embedded .gcp button.gcp__control {
  border-color: var(--field-outline) !important;
  background: var(--surface-surface) !important;
}

html:where(.gdrfad-dds) .gpp .gpp__container,
.gdrfad-dds-embedded .gpp .gpp__container {
  border-color: var(--field-outline) !important;
  background: var(--surface-surface) !important;
}

html:where(.gdrfad-dds) .gcp button.gcp__control:hover,
.gdrfad-dds-embedded .gcp button.gcp__control:hover {
  border-color: var(--surface-on-surface-variant) !important;
}

html:where(.gdrfad-dds) .gpp .gpp__container:hover,
.gdrfad-dds-embedded .gpp .gpp__container:hover {
  border-color: var(--surface-on-surface-variant) !important;
}

/* Error. */
html:where(.gdrfad-dds) .gcp.gcp--error button.gcp__control,
.gdrfad-dds-embedded .gcp.gcp--error button.gcp__control {
  border-color: var(--error-error) !important;
}

html:where(.gdrfad-dds) .gcp:has(.gcp__native.error) button.gcp__control,
.gdrfad-dds-embedded .gcp:has(.gcp__native.error) button.gcp__control {
  border-color: var(--error-error) !important;
}

html:where(.gdrfad-dds) .gcp:has(.gcp__native[aria-invalid="true"]) button.gcp__control,
.gdrfad-dds-embedded .gcp:has(.gcp__native[aria-invalid="true"]) button.gcp__control {
  border-color: var(--error-error) !important;
}

html:where(.gdrfad-dds) .gpp.gpp--error .gpp__container,
.gdrfad-dds-embedded .gpp.gpp--error .gpp__container {
  border-color: var(--error-error) !important;
}

html:where(.gdrfad-dds) .gpp:has(.gpp__native.error) .gpp__container,
.gdrfad-dds-embedded .gpp:has(.gpp__native.error) .gpp__container {
  border-color: var(--error-error) !important;
}

html:where(.gdrfad-dds) .gpp:has(.gpp__native[aria-invalid="true"]) .gpp__container,
.gdrfad-dds-embedded .gpp:has(.gpp__native[aria-invalid="true"]) .gpp__container {
  border-color: var(--error-error) !important;
}

/* Focus and open (after error: a focused field shows focus). */
html:where(.gdrfad-dds) .gcp button.gcp__control:focus-visible,
.gdrfad-dds-embedded .gcp button.gcp__control:focus-visible {
  border-color: var(--primary-primary) !important;
  box-shadow: var(--focus-ring) !important;
}

html:where(.gdrfad-dds) .gcp.is-open button.gcp__control,
.gdrfad-dds-embedded .gcp.is-open button.gcp__control {
  border-color: var(--primary-primary) !important;
  box-shadow: var(--focus-ring) !important;
}

html:where(.gdrfad-dds) .gpp .gpp__container:focus-within,
.gdrfad-dds-embedded .gpp .gpp__container:focus-within {
  border-color: var(--primary-primary) !important;
  box-shadow: var(--focus-ring) !important;
}

html:where(.gdrfad-dds) .gpp.is-open .gpp__container,
.gdrfad-dds-embedded .gpp.is-open .gpp__container {
  border-color: var(--primary-primary) !important;
  box-shadow: var(--focus-ring) !important;
}

/* Disabled. */
html:where(.gdrfad-dds) .gcp:has(.gcp__native:disabled) button.gcp__control,
.gdrfad-dds-embedded .gcp:has(.gcp__native:disabled) button.gcp__control {
  border-color: transparent !important;
  background: var(--state-layers-disabled) !important;
}

html:where(.gdrfad-dds) .gpp.gpp--disabled .gpp__container,
.gdrfad-dds-embedded .gpp.gpp--disabled .gpp__container {
  border-color: transparent !important;
  background: var(--state-layers-disabled) !important;
}