.appearance-toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(128, 120, 108, .45);
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

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

.appearance-toggle:hover { border-color: currentColor; }

.appearance-toggle svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The icon shows what a tap switches to. */
.appearance-toggle .ic-sun { display: none; }
[data-effective="dark"] .appearance-toggle .ic-sun { display: block; }
[data-effective="dark"] .appearance-toggle .ic-moon { display: none; }

:root[data-appearance="light"] { color-scheme: light; }
:root[data-appearance="dark"] { color-scheme: dark; }