.lang {
  position: relative;
  font-family: inherit;
}

.lang summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 0.9375rem;
  color: var(--lang-text-dim, #5b5b66);
  cursor: pointer;
  transition: color 120ms ease, background-color 120ms ease;
}

.lang summary::-webkit-details-marker {
  display: none;
}

.lang summary::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  opacity: 0.6;
}

.lang[open] summary,
.lang summary:hover {
  color: var(--lang-text, #14141a);
  background: var(--lang-surface-2, #f1f1f5);
  border-color: var(--lang-line, #d9d9e0);
}

.lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-start: 0;
  z-index: 20;
  min-width: 180px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 6px;
  background: var(--lang-surface-1, #ffffff);
  border: 1px solid var(--lang-line-strong, #c8c8d2);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
}

.lang-menu a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 6px;
  font-size: 0.9375rem;
  color: var(--lang-text-dim, #5b5b66);
  text-decoration: none;
  white-space: nowrap;
}

.lang-menu a[aria-current] {
  color: var(--lang-text, #14141a);
  background: var(--lang-surface-2, #f1f1f5);
}

.lang-menu a:hover,
.lang-menu a:focus-visible {
  color: var(--lang-text, #14141a);
  background: var(--lang-surface-3, #e6e6ee);
}

.flag {
  width: 20px;
  height: 14px;
  border-radius: 2px;
  flex: none;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}

@media (max-width: 699px) {
  .lang-menu {
    position: fixed;
    inset-inline: 12px;
    inset-block-start: auto;
    top: auto;
    bottom: 12px;
    min-width: 0;
    max-height: 70vh;
  }
}

@media (prefers-color-scheme: dark) {
  .lang {
    --lang-text: #f4f4f8;
    --lang-text-dim: #a6a6b4;
    --lang-surface-1: #1b1b22;
    --lang-surface-2: #26262f;
    --lang-surface-3: #32323d;
    --lang-line: #3a3a46;
    --lang-line-strong: #4a4a58;
  }

  .flag {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16);
  }
}