.site-theme-toggle {
  box-sizing: border-box;
  display: grid;
  flex: 0 0 44px;
  place-items: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--theme-toggle-border, currentColor);
  border-radius: 50%;
  background: var(--theme-toggle-background, transparent);
  color: var(--theme-toggle-color, currentColor);
  cursor: pointer;
  line-height: 0;
  -webkit-tap-highlight-color: transparent;
}

.site-theme-toggle svg {
  display: block;
  width: 24px;
  height: 24px;
  margin: auto;
  overflow: visible;
}

/* Expand by Alfie Jones, theme-toggles 4.10.1 (MIT).
   Original paths, scale and timing; the button layout is shared by all pages. */
.theme-toggle__expand g circle,
.theme-toggle__expand g path {
  transform-origin: center;
  transition: transform 325ms cubic-bezier(0, 0, 0, 1.25) 175ms;
}

.theme-toggle__expand clipPath path {
  transition-property: transform, d;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0, 0, 0.5, 1);
}

html[data-theme="dark"] .theme-toggle__expand g circle {
  transform: scale(1.4);
  transition-delay: 0s;
}

html[data-theme="dark"] .theme-toggle__expand g path {
  transform: scale(0.75);
  transition-delay: 0s;
}

html[data-theme="dark"] .theme-toggle__expand clipPath path {
  d: path("M-9 3h25a1 1 0 0017 13v30H0Z");
  transition-delay: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0, 1.25);
}

@supports not (d: path("")) {
  html[data-theme="dark"] .theme-toggle__expand clipPath path {
    transform: translate3d(-9px, 14px, 0);
  }
}

.site-theme-toggle:focus-visible {
  outline: 3px solid var(--theme-toggle-focus, #ae1f2d);
  outline-offset: 2px;
}

.storefront-page .site-theme-toggle,
.admin-page .site-theme-toggle {
  --theme-toggle-border: var(--line);
  --theme-toggle-background: var(--panel);
  --theme-toggle-color: var(--text);
  --theme-toggle-focus: var(--red);
}

.vise-page .site-theme-toggle {
  --theme-toggle-border: var(--vise-line);
  --theme-toggle-background: var(--vise-paper);
  --theme-toggle-color: var(--vise-ink);
  --theme-toggle-focus: var(--vise-red);
}

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