/**
 * @file
 * Dubai Design System "Country Dropdown" — shared by both GDRFAD pickers.
 *
 * Figma: Dubai Design System v2.2 — node 12351:30342 (panel + search field)
 * and node 12351:29431 (row states).
 *
 * Every colour, radius, gap and padding below is the design-system variable
 * under its own name. The GDRFA host site defines them in common.css; the
 * fallbacks are the values Figma resolves them to, so the widget also renders
 * correctly inside plain Drupal where the tokens are absent.
 */

/* ============================================================
 * Icon box — 24x24 outer, exported glyph centred inside
 * ============================================================ */

.gdds-icon {
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--surface-on-surface-variant, #40484f);
}

.gdds-icon__glyph {
  display: block;
}

/* ============================================================
 * Panel — elevation/3, radius-xs, surface/outline
 * ============================================================ */

.gdds-dropdown {
  position: absolute;
  z-index: 1001;
  top: calc(100% + 3px);
  inset-inline: -1px;
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--surface-outline, #e4e2e6);
  border-radius: var(--radius-xs, 8px);
  background: var(--surface-surface, #ffffff);
  box-shadow: 0 8px 24px 0 var(--opacity-on-surface-opacity12, rgba(0, 0, 0, 0.12));
}

.gdds-dropdown[hidden] {
  display: none;
}

/* ============================================================
 * Search field — Search Field / Small / Unfilled (node 2414:47401)
 * ============================================================ */

.gdds-dropdown__search-container {
  padding: var(--padding-padding-sm, 8px);
}

.gdds-dropdown__search-field {
  display: flex;
  box-sizing: border-box;
  height: 48px;
  align-items: center;
  gap: var(--gap-gap-sm, 8px);
  overflow: hidden;
  padding-inline: var(--padding-padding-lg, 16px) var(--padding-padding-md, 12px);
  border: 1px solid var(--surface-outline, #e4e2e6);
  border-radius: var(--radius-xs, 8px);
  background: var(--surface-surface, #ffffff);
}

.gdds-dropdown__search-field:focus-within {
  border-color: var(--primary-primary, #2a638b);
  box-shadow: 0 0 0 3px var(--primary-primary-variant, #e7f2fe);
}

.gdds-dropdown input.gdds-dropdown__search {
  box-sizing: border-box;
  height: 100%;
  min-width: 0;
  flex: 1 1 auto;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--surface-on-surface, #000000) !important;
  font-family: var(--font-family, inherit) !important;
  font-size: var(--font-size-body, 16px) !important;
  line-height: var(--line-height-body, 24px) !important;
  outline: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.gdds-dropdown input.gdds-dropdown__search::placeholder {
  color: var(--state-layers-on-disabled, #5e5e62) !important;
  opacity: 1 !important;
}

.gdds-dropdown input.gdds-dropdown__search::-webkit-search-cancel-button {
  display: none;
}

.gdds-dropdown button.gdds-dropdown__clear {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 100px !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.gdds-dropdown button.gdds-dropdown__clear:focus-visible {
  outline: 2px solid var(--primary-primary, #2a638b) !important;
  outline-offset: 2px;
}

.gdds-dropdown button.gdds-dropdown__clear[hidden] {
  display: none;
}

/* ============================================================
 * Body — scrolls; Figma shows 10 rows (560px) before scrolling
 * ============================================================ */

.gdds-dropdown__body {
  display: flex;
  max-height: min(560px, 50vh);
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: var(--surface-on-surface-variant, #40484f) transparent;
  scrollbar-width: thin;
}

/* 4px thumb inset 2px from the edge, matching the Scrollbar layer. */
.gdds-dropdown__body::-webkit-scrollbar {
  width: 8px;
}

.gdds-dropdown__body::-webkit-scrollbar-track {
  background: transparent;
}

.gdds-dropdown__body::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 100px;
  background: var(--surface-on-surface-variant, #40484f);
  background-clip: content-box;
}

/* ============================================================
 * Row — 56px, state_Layer padding, DDS state layers
 * ============================================================ */

.gdds-dropdown button.gdds-dropdown__option {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  min-height: 56px;
  align-items: center;
  gap: var(--gap-gap-sm, 8px);
  margin: 0 !important;
  padding: var(--padding-padding-sm, 8px) var(--padding-padding-lg, 16px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !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;
}

/* Must out-specify the `display: flex` above, or filtering silently does
 * nothing: `.gdds-dropdown button.gdds-dropdown__option` (0,2,1) beats a plain
 * `.gdds-dropdown__option[hidden]` (0,2,0). */
.gdds-dropdown button.gdds-dropdown__option[hidden] {
  display: none;
}

.gdds-dropdown button.gdds-dropdown__option:hover {
  background: var(--state-layers-on-primary-hovered, #eff6fe) !important;
}

/* Selected keeps the "focused" layer even while hovered, so the current
 * choice never appears to un-highlight under the pointer. */
.gdds-dropdown button.gdds-dropdown__option[aria-selected="true"],
.gdds-dropdown button.gdds-dropdown__option:focus,
.gdds-dropdown button.gdds-dropdown__option:focus-visible {
  background: var(--state-layers-primary-variant-focused, #d5e9fd) !important;
  outline: 0 !important;
}

.gdds-dropdown button.gdds-dropdown__option:active {
  background: var(--state-layers-primary-variant-pressed, #b0d6f7) !important;
}

.gdds-dropdown__list-settings {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.gdds-dropdown__dial {
  display: flex;
  height: var(--line-height-h4, 32px);
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
}

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

.gdds-dropdown__calling-code {
  font-size: var(--font-size-body, 16px);
  line-height: var(--line-height-body, 24px);
}

.gdds-dropdown__name {
  overflow: hidden;
  min-width: 0;
  flex: 1 1 auto;
  font-size: var(--font-size-body, 16px);
  line-height: var(--line-height-body, 24px);
  text-overflow: ellipsis;
}

.gdds-dropdown__empty {
  margin: 0;
  padding: var(--padding-padding-lg, 16px);
  color: var(--state-layers-on-disabled, #5e5e62);
  font-size: var(--font-size-body, 16px);
  line-height: var(--line-height-body, 24px);
  text-align: center;
}

.gdds-dropdown__empty[hidden] {
  display: none;
}

@media (max-width: 640px) {
  .gdds-dropdown__body {
    max-height: min(336px, 45vh);
  }
}

/* ============================================================
 * Validation message — the design's "Form Footer Text" slot,
 * below the field, in the error colour.
 *
 * `.gdds-field` is put on the form-item wrapper by both elements, so this
 * covers BOTH paths without restyling the rest of the site:
 *   - Inline Form Errors renders <div class="form-item--error-message">
 *     after the whole widget;
 *   - clientside_validation renders <strong class="error
 *     form-item--error-message"> after the real field, which the templates
 *     render last — so it also lands below the control.
 * ============================================================ */

.gdds-field .form-item--error-message {
  display: block;
  margin-top: var(--gap-gap-sm, 8px);
  color: var(--error-error, #c0000a);
  font-family: var(--font-family, inherit);
  font-size: var(--font-size-caption, 14px);
  font-weight: 400;
  letter-spacing: 0.14px;
  line-height: var(--line-height-caption, 20px);
}

.gdds-field .form-item--error-message strong {
  font-weight: inherit;
}

/* The description sits in the same slot when there is no error. */
.gdds-field .description {
  margin-top: var(--gap-gap-sm, 8px);
  color: var(--surface-on-surface-variant, #40484f);
  font-size: var(--font-size-caption, 14px);
  letter-spacing: 0.14px;
  line-height: var(--line-height-caption, 20px);
}