/*
 * The header language selector: a flag button that opens a menu.
 *
 * Written with logical properties throughout, so it mirrors in Hebrew and
 * Yiddish without a second set of rules.
 *
 * Everything is a custom property, so the whole thing can be restyled from a
 * Bricks class without touching this file:
 *
 *     .site-header__languages {
 *       --mishnah-lang-radius: 4px;
 *       --mishnah-lang-panel-bg: #111;
 *     }
 */

.mishnah-lang-dropdown {
  --mishnah-lang-bg: #fff;
  --mishnah-lang-fg: #2d3748;
  --mishnah-lang-radius: 999px;
  --mishnah-lang-panel-bg: #fff;
  --mishnah-lang-panel-radius: 14px;
  --mishnah-lang-shadow: 0 6px 24px rgba(15, 23, 42, 0.12);
  --mishnah-lang-hover: #f4f6fa;
  --mishnah-lang-check: #16a34a;
  --mishnah-lang-caret: #929292;
  --mishnah-lang-flag-width: 26px;

  position: relative;
  display: inline-block;
  text-align: start;
}

/* --------------------------------------------------------------------------
 * The button
 * -------------------------------------------------------------------------- */

.mishnah-lang-dropdown__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 10px;
  border: 1px solid #ececec;
  border-radius: var(--mishnah-lang-radius);
  background: var(--mishnah-lang-bg);
  color: var(--mishnah-lang-fg);
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

.mishnah-lang-dropdown__toggle:focus-visible {
  outline: 2px solid var(--mishnah-lang-caret);
  outline-offset: 2px;
}

.mishnah-lang-dropdown__current {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.9em;
}

/* The code is always Latin and two letters wide, so it can be kept tight and
   left-to-right even in a mirrored header. */
.mishnah-lang-dropdown__current--code {
  direction: ltr;
  font-variant-numeric: tabular-nums;
}

/* Names have case; the codes do not need protecting. */
.mishnah-lang-dropdown__current--name[lang="he"],
.mishnah-lang-dropdown__current--name[lang="yi"],
.mishnah-lang-dropdown__current--name[lang="ar"] {
  text-transform: none;
}

/* The path is drawn pointing down, which is the closed state - so no rotation
   here, and a half turn when the menu opens. */
.mishnah-lang-dropdown__caret {
  width: 12px !important;
  height: 6px !important;
  color: var(--mishnah-lang-caret);
  transition: transform 0.18s ease;
}

.mishnah-lang-dropdown__toggle[aria-expanded="true"] .mishnah-lang-dropdown__caret {
  transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
 * Flags
 *
 * A fixed width keeps the names lined up even though flag aspect ratios differ.
 * -------------------------------------------------------------------------- */

.mishnah-lang-dropdown__flag {
  flex: none;
  width: var(--mishnah-lang-flag-width);
  height: auto;
}

img.mishnah-lang-dropdown__flag {
    height: 18px;
    width: 18px;
}

/* Shown in place of a missing flag, so a new language still looks deliberate. */
.mishnah-lang-dropdown__flag--placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--mishnah-lang-flag-width);
  height: calc(var(--mishnah-lang-flag-width) * 0.72);
  border-radius: 2px;
  background: #e2e8f0;
  color: #475569;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
 * The panel
 * -------------------------------------------------------------------------- */

.mishnah-lang-dropdown__panel {
  position: absolute;
  z-index: 100;
  min-width: max(100%, 200px);
  padding: 8px;
  border-radius: var(--mishnah-lang-panel-radius);
  background: var(--mishnah-lang-panel-bg);
  box-shadow: var(--mishnah-lang-shadow);
}

.mishnah-lang-dropdown__panel[hidden] {
  display: none;
}

/*
 * Without JavaScript the panel is a plain list of links below the button. The
 * [hidden] attribute is only added by the script, so nothing is unreachable if
 * scripts fail.
 */

.mishnah-lang-dropdown--down .mishnah-lang-dropdown__panel {
  top: calc(100% + 10px);
}

.mishnah-lang-dropdown--up .mishnah-lang-dropdown__panel {
  bottom: calc(100% + 10px);
}

.mishnah-lang-dropdown--align-end .mishnah-lang-dropdown__panel {
  inset-inline-end: 0;
}

.mishnah-lang-dropdown--align-start .mishnah-lang-dropdown__panel {
  inset-inline-start: 0;
}

/* --------------------------------------------------------------------------
 * Options
 * -------------------------------------------------------------------------- */

.mishnah-lang-dropdown__option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px;
  border-radius: 8px;
  color: var(--mishnah-lang-fg);
  text-decoration: none;
  transition: background 0.15s ease;
}

.mishnah-lang-dropdown__option:hover,
.mishnah-lang-dropdown__option:focus-visible {
  background: var(--mishnah-lang-hover);
  color: var(--mishnah-lang-fg);
  text-decoration: none;
}

.mishnah-lang-dropdown__option:focus-visible {
  outline: 2px solid var(--mishnah-lang-caret);
  outline-offset: -2px;
}

.mishnah-lang-dropdown__name {
  flex: 1;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.9em;
}

/* Hebrew and Yiddish have no letter case, and uppercasing can interfere with
   how some fonts shape them. */
.mishnah-lang-dropdown__option[lang="he"] .mishnah-lang-dropdown__name,
.mishnah-lang-dropdown__option[lang="yi"] .mishnah-lang-dropdown__name,
.mishnah-lang-dropdown__option[lang="ar"] .mishnah-lang-dropdown__name {
  text-transform: none;
}

.mishnah-lang-dropdown__check {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--mishnah-lang-check);
}

/* --------------------------------------------------------------------------
 * Motion
 * -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .mishnah-lang-dropdown__panel {
    animation: mishnah-lang-in 0.16s ease-out;
  }

  @keyframes mishnah-lang-in {
    from {
      opacity: 0;
      transform: translateY(-4px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .mishnah-lang-dropdown--up .mishnah-lang-dropdown__panel {
    animation-name: mishnah-lang-in-up;
  }

  @keyframes mishnah-lang-in-up {
    from {
      opacity: 0;
      transform: translateY(4px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* --------------------------------------------------------------------------
 * Dark headers
 * -------------------------------------------------------------------------- */

.mishnah-lang-dropdown--dark {
  --mishnah-lang-bg: #1f2937;
  --mishnah-lang-fg: #f8fafc;
  --mishnah-lang-panel-bg: #1f2937;
  --mishnah-lang-hover: #334155;
  --mishnah-lang-caret: #a5b4fc;
}