/* ==========================================================================
   Tema — o que o botão de claro/escuro tem de próprio.

   Posição e pilula vêm de controles.css. O sinal aqui é um disco que se
   preenche pela metade, como uma lua: vazado no tema claro, meio cheio no
   escuro. Sinal tipográfico, não pictograma.
   ========================================================================== */

.tema__botao::before {
  content: "";
  width: 6px;
  height: 6px;
  border: 1px solid currentColor;
  border-radius: 50%;
  /* Meia-lua: o gradiente duro corta o disco ao meio sem imagem nenhuma. */
  background-image: linear-gradient(
    to right,
    currentColor 0 50%,
    transparent 50% 100%
  );
  transition: background-image var(--transition-fast);
}

.tema__botao[aria-pressed="true"]::before {
  background-image: linear-gradient(
    to right,
    currentColor 0 100%,
    transparent 100%
  );
}