/* Theme Switch styles. Colors come from the host's own theme tokens so the
   control follows whatever the garden already is; the accent falls back to a
   neutral ink on a host that defines no --interactive-accent. */

.theme-switch-control {
  /* Hidden until the head script marks JavaScript as running, so a visitor
     without JavaScript never gets a control that cannot work. */
  display: none;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  min-width: 44px;
  padding: 0 0.85rem;
  font: inherit;
  font-size: 0.9rem;
  line-height: 1;
  color: var(--text-normal, #2f2c35);
  background-color: var(--background-secondary, #ffffff);
  border: 1px solid var(--background-modifier-border, rgba(0, 0, 0, 0.16));
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

html[data-theme-switch="ready"] .theme-switch-control {
  display: inline-flex;
}

.theme-switch-control:hover {
  background-color: var(--background-secondary-alt, var(--background-secondary, #ffffff));
  border-color: color-mix(in srgb, var(--interactive-accent, #5f4fbf) 40%, transparent);
}

.theme-switch-control:focus-visible {
  outline: 2px solid var(--interactive-accent, #5f4fbf);
  outline-offset: 2px;
}

.theme-switch-control__icon {
  display: block;
  width: 18px;
  height: 18px;
}

.theme-switch-icon {
  width: 18px;
  height: 18px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.theme-switch-icon--sun circle {
  fill: currentColor;
  stroke: none;
}

/* The icon shows the theme a press would switch to, not the current one. */
.theme-switch-control[data-theme="light"] .theme-switch-icon--sun,
.theme-switch-control[data-theme="dark"] .theme-switch-icon--moon {
  display: none;
}

@media (max-width: 480px) {
  .theme-switch-control {
    padding: 0 0.6rem;
  }
}