.language-picker {
  display: flex;
  justify-content: flex-end;
  padding: 0.5em 0;
  font-size: 1.4rem;
}

.language-picker.dropdown {
  position: relative;
  display: inline-block;
  padding: 0;
  vertical-align: middle;
}

.language-menu {
  display: flex;
  gap: 0.5em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dropdown .language-menu {
  position: absolute;
  inset-inline-end: 0;
  top: 100%;
  z-index: 110;
  display: block;
  min-width: 10rem;
  padding: 4px 0;
  border: 1px solid var(--theme-popup-border);
  border-radius: 4px;
  background: var(--theme-popup-bg);
  color: var(--fg);
}

.language-menu[hidden] {
  display: none;
}

.language-menu a {
  display: block;
  padding: 0.5em 0.9em;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.language-menu a:hover {
  background: var(--theme-hover);
}

.language-menu a:focus-visible {
  outline: 2px solid var(--links);
  outline-offset: -2px;
}

.language-menu a[aria-current="true"] {
  font-weight: bold;
}

.language-menu a[aria-current="true"]::after {
  content: "✓";
  margin-inline-start: 0.75em;
}