.synapse-theme-toggle {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid rgb(127 127 127 / 0.38);
  border-radius: 999px;
  background: rgb(127 127 127 / 0.12);
  color: inherit;
  cursor: pointer;
  font: 650 0.82rem/1 "Geist", system-ui, sans-serif;
  white-space: nowrap;
}

.synapse-theme-toggle:hover {
  border-color: currentcolor;
  background: rgb(127 127 127 / 0.2);
}

.synapse-theme-toggle:focus-visible {
  outline: 2px solid currentcolor;
  outline-offset: 3px;
}

.synapse-theme-toggle svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.synapse-theme-toggle__moon {
  fill: currentcolor !important;
  stroke: none !important;
}

.synapse-theme-toggle[data-mode="light"] .synapse-theme-toggle__sun,
.synapse-theme-toggle[data-mode="dark"] .synapse-theme-toggle__moon {
  display: none;
}

.synapse-theme-toggle-item {
  display: flex;
  align-items: center;
}

@media (max-width: 768px) {
  .synapse-theme-toggle--console {
    width: 38px;
    justify-content: center;
    padding: 0;
  }

  .synapse-theme-toggle--console span {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .synapse-theme-toggle {
    transition: none;
  }
}