/*!
 * int_language — IntLanguageSelect
 *
 * Theming: every colour resolves through `--intlang-*` first, then the app's own
 * design-system token, then a neutral literal. int_lms defines `--color-*` in
 * design-system/tokens.css and needs no override; an app on a different system
 * sets the `--intlang-*` values on `:root` and is done.
 *
 * Deliberately does NOT read `--bs-primary`. Bootstrap's CDN build defines it as
 * #0d6efd, so `var(--bs-primary)` does not fail loudly in a non-blue app — it
 * silently renders Bootstrap blue and looks like a design decision.
 */

.intlang {
  position: relative;
}

/* ── Toggle ───────────────────────────────────────────────────────────────── */

.intlang-toggle {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  width: 100%;
  cursor: pointer;
  overflow: hidden;
}

.intlang-toggle:focus-visible {
  outline: 2px solid var(--intlang-focus, var(--focus-ring, var(--color-primary, #7B5F5F)));
  outline-offset: 1px;
}

.intlang-endonym {
  font-weight: 600;
  white-space: nowrap;
}

.intlang-english,
.intlang-option-english {
  color: var(--intlang-muted-fg, var(--color-muted-fg, #6B625C));
  font-size: .875em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* An off-list value carried over from the free-text era. Marked, not corrected —
   see the `preserved` option in language-select.js. */
.intlang-toggle-unknown .intlang-endonym {
  font-style: italic;
}

/* ── Menu ─────────────────────────────────────────────────────────────────── */

.intlang-menu {
  position: absolute;
  z-index: 1056;            /* above a Bootstrap modal (1055); these sit in forms inside them */
  top: calc(100% + .25rem);
  left: 0;
  right: 0;
  min-width: 16rem;
  padding: .5rem;
  background: var(--intlang-surface, var(--color-surface, #FFFFFF));
  border: 1px solid var(--intlang-border, var(--color-border, #E3DCD7));
  border-radius: .5rem;
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .12);
}

.intlang-menu-up {
  top: auto;
  bottom: calc(100% + .25rem);
}

.intlang-menu[hidden] {
  display: none;            /* `hidden` loses to `display:` on some UA sheets */
}

.intlang-search-wrap {
  margin-bottom: .375rem;
}

/* ── Options ──────────────────────────────────────────────────────────────── */

.intlang-list {
  list-style: none;
  margin: 0;
  padding: 0;
  /* ~7 rows. The list is 21 long and a menu taller than the viewport puts the
     bottom options off-screen with no way to reach them on a short window. */
  max-height: 17rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.intlang-option {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding: .375rem .5rem;
  border-radius: .375rem;
  cursor: pointer;
  color: var(--intlang-fg, var(--color-fg, #17130F));
}

.intlang-option-endonym {
  font-weight: 600;
  white-space: nowrap;
}

.intlang-option-english {
  flex: 1 1 auto;
}

.intlang-option-code {
  margin-left: auto;
  flex: 0 0 auto;
  font-family: var(--font-family-mono, ui-monospace, monospace);
  font-size: .75em;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--intlang-muted-fg, var(--color-muted-fg, #6B625C));
}

/* Hover and keyboard share one highlight: with the caret in the search box the
   pointer never moves the focus, so two separate highlights would both be lit
   and Enter would commit the one the eye was not on. */
.intlang-option-active {
  background: var(--intlang-active-bg, var(--color-surface-sunken, #EDE7E4));
}

.intlang-option-selected .intlang-option-endonym {
  color: var(--intlang-accent, var(--color-primary, #7B5F5F));
}

.intlang-option-selected::before {
  content: "";
  width: .25rem;
  align-self: stretch;
  margin-right: -.25rem;
  border-radius: 1rem;
  background: var(--intlang-accent, var(--color-primary, #7B5F5F));
}

.intlang-option-unknown .intlang-option-endonym {
  font-style: italic;
}

.intlang-empty {
  padding: .75rem .5rem;
  font-size: .875rem;
  color: var(--intlang-muted-fg, var(--color-muted-fg, #6B625C));
}

@media (prefers-reduced-motion: no-preference) {
  .intlang-option {
    transition: background-color .12s ease;
  }
}