/* ds-alternador */
.ds-alternador { display: inline-flex; align-items: center; gap: var(--ds-espaco-3); }
.ds-alternador__rotulo { cursor: pointer; color: var(--ds-cor-texto-suave); }
.ds-alternador__rotulo--ativo { color: var(--ds-cor-titulo); text-decoration: underline; text-decoration-color: var(--ds-cor-acento); text-decoration-thickness: var(--ds-borda-largura-forte); text-underline-offset: 0.35em; }
.ds-alternador__chave {
  position: relative; flex: none;
  width: 3.5rem; height: 2rem; padding: 0; cursor: pointer;
  border: var(--ds-borda-largura-forte) solid var(--ds-cor-destaque); border-radius: var(--ds-raio-pilula);
  background: var(--ds-cor-superficie);
  transition: background-color var(--ds-duracao) var(--ds-curva);
}
.ds-alternador__bolinha {
  position: absolute; top: 50%; left: 0.2rem;
  width: 1.35rem; height: 1.35rem; border-radius: 50%;
  background: var(--ds-cor-destaque);
  transform: translateY(-50%);
  transition: transform var(--ds-duracao) var(--ds-curva), background-color var(--ds-duracao) var(--ds-curva);
}
.ds-alternador__chave[aria-checked="true"] { background: var(--ds-cor-destaque); }
.ds-alternador__chave[aria-checked="true"] .ds-alternador__bolinha { transform: translate(1.45rem, -50%); background: var(--ds-cor-sobre-destaque); }
.ds-alternador__exemplo { margin-top: var(--ds-espaco-3); }