/**
 * @file
 * GDRFAD country picker — Dubai Design System select field.
 *
 * Figma: Dubai Design System v2.2 — field anatomy from node 12351:45929
 * (56px container, radius-xs, surface/outline, padding-lg, gap-sm), list styles
 * live in gdrfad-dropdown.css.
 *
 * Design-system variables are used under their own names, with the values Figma
 * resolves them to as fallbacks for plain Drupal, where the host site's token
 * sheet is not loaded.
 */

.gcp {
  position: relative;
  width: 100%;
}

/* The real <select> stays in the DOM for the form and the validator.
 * Clip-based hiding, never a negative offset: under dir="rtl" an offset lands
 * in the scrollable direction and stretches the whole document. */
.gcp__native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

/* ============================================================
 * Control
 * ============================================================ */

.gcp button.gcp__control {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  height: 56px;
  min-height: 56px;
  align-items: center;
  gap: var(--gap-gap-sm, 8px);
  margin: 0 !important;
  padding: 0 var(--padding-padding-lg, 16px) !important;
  border: 1px solid var(--surface-outline, #e4e2e6) !important;
  border-radius: var(--radius-xs, 8px) !important;
  background: var(--surface-surface, #ffffff) !important;
  box-shadow: none !important;
  color: var(--surface-on-surface, #000000) !important;
  cursor: pointer;
  font-family: var(--font-family, inherit) !important;
  font-size: var(--font-size-body, 16px) !important;
  line-height: var(--line-height-body, 24px) !important;
  text-align: start !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

/* Focused / Focused UnFilled: primary border + the Focused/Primary effect
 * (0 0 0 3px primary/primary-variant). */
.gcp button.gcp__control:focus,
.gcp button.gcp__control:focus-visible,
.gcp.is-open button.gcp__control {
  border-color: var(--primary-primary, #2a638b) !important;
  box-shadow: 0 0 0 3px var(--primary-primary-variant, #e7f2fe) !important;
  outline: 0 !important;
}

.gcp__value {
  display: flex;
  height: var(--line-height-h4, 32px);
  min-width: 0;
  flex: 1 1 auto;
  align-items: center;
  gap: var(--gap-gap-sm, 8px);
}

.gcp__flag {
  display: block;
  width: 28px;
  height: 20px;
  flex: 0 0 auto;
  border-radius: 2px;
  object-fit: cover;
}

.gcp__flag[hidden] {
  display: none;
}

.gcp__label {
  overflow: hidden;
  min-width: 0;
  flex: 1 1 auto;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gcp__value--empty .gcp__label {
  color: var(--state-layers-on-disabled, #5e5e62);
}

.gcp__icon {
  margin-inline-start: auto;
  transition: transform 0.15s ease;
}

.gcp.is-open .gcp__icon {
  transform: rotate(180deg);
}

/* ============================================================
 * Error — mirrors the real <select>'s validation state
 * ============================================================ */

/* The class is toggled by the MutationObserver in the adapter and is the
 * primary path. Kept in its own rule because an unsupported `:has()` would
 * invalidate the whole selector list and take this with it. */
/* Only the border and the footer message carry the error state — the chevron
 * stays surface/on-surface-variant, as in the design's Error variant.
 *
 * The class is toggled by the MutationObserver in the adapter and is the
 * primary path. Kept in its own rule because an unsupported `:has()` would
 * invalidate the whole selector list and take this with it. */
.gcp--error button.gcp__control {
  border-color: var(--error-error, #c0000a) !important;
}

/* JS-free fallback. `:has()` rather than a sibling combinator because the real
 * <select> is rendered after the control (see the template comment). */
.gcp:has(.gcp__native.error) button.gcp__control,
.gcp:has(.gcp__native[aria-invalid="true"]) button.gcp__control {
  border-color: var(--error-error, #c0000a) !important;
}

/* ============================================================
 * Disabled
 * ============================================================ */

.gcp:has(.gcp__native:disabled) button.gcp__control {
  background: var(--state-layers-disabled, #f2f0f4) !important;
  color: var(--state-layers-on-disabled, #5e5e62) !important;
  cursor: not-allowed;
}