/* Small dropdown used in the top nav for language and theme.
   Built on <details>/<summary>, so opening and closing needs no JavaScript. */
.dropdown {
  position: relative;
}

.dropdown__toggle {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  font-size: 1.1rem;
  line-height: 1;
  user-select: none;
}

.dropdown__toggle::-webkit-details-marker {
  display: none;
}

.dropdown__toggle:hover,
.dropdown[open] .dropdown__toggle {
  border-color: var(--color-primary);
}

.dropdown__caret {
  font-size: 0.7rem;
  color: var(--color-ink-muted);
}

.dropdown__menu {
  position: absolute;
  right: 0;
  top: calc(100% + var(--spacing-sm));
  min-width: 140px;
  margin: 0;
  padding: var(--spacing-xs);
  list-style: none;
  background-color: var(--color-canvas);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.dropdown__option {
  display: block;
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  font: inherit;
  font-size: 0.95rem;
  text-align: left;
  text-decoration: none;
  color: var(--color-ink);
  white-space: nowrap;
  cursor: pointer;
}

.dropdown__option:hover {
  background-color: var(--color-primary-light);
}

.dropdown__option--active {
  color: var(--color-primary);
  font-weight: 600;
}

/* Theme switcher: show the icon of the current theme, mark the active option */
.theme__icon--light,
:root[data-theme="light"] .theme__icon--dark {
  display: none;
}

:root[data-theme="light"] .theme__icon--light {
  display: inline;
}

.theme__option[data-theme-value="dark"],
:root[data-theme="light"] .theme__option[data-theme-value="light"] {
  color: var(--color-primary);
  font-weight: 600;
}

:root[data-theme="light"] .theme__option[data-theme-value="dark"] {
  color: var(--color-ink);
  font-weight: normal;
}