.theme-toggle {
  --size: 22px;
  --icon-fill: hsl(210 10% 15%);
  --icon-fill-hover: hsl(210 10% 30%);

  display: block;

  background: none;
  border: none;
  padding: 0;

  inline-size: var(--size);
  block-size: var(--size);
  aspect-ratio: 1;
  border-radius: 50%;

  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;

  outline-offset: 5px;
}

[data-theme='dark'] .theme-toggle {
  --icon-fill: hsl(210 10% 100%);
  --icon-fill-hover: hsl(210 15% 70%);
}

.theme-toggle > svg {
  inline-size: 100%;
  block-size: 100%;
  stroke-linecap: round;
}
