.theme-toggle {
  padding: 7px 11px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
  line-height: 1.4;
  white-space: nowrap;
}

.theme-toggle:hover {
  color: var(--theme-accent);
}

:root[data-theme="dark"] .theme-toggle {
  background: var(--theme-active-background);
  color: var(--theme-active-text);
}

:root[data-theme="dark"] .theme-toggle:hover {
  color: var(--theme-active-text);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--theme-accent);
  outline-offset: 4px;
}

.theme-toggle[hidden] {
  display: none;
}