/* Odontograma — desenho dos dentes.
   Carregado automaticamente pelo stylesheet_link_tag :app do layout, que o
   Propshaft expande para todos os arquivos desta pasta. */

/* As faces da coroa são links dentro do SVG. Sem retorno visual o dentista não
   descobre que dá para clicar em cada uma. A especificidade aqui precisa
   ganhar das classes fill-* do Tailwind, que valem 0,1,0. */
.odontogram-zone path {
  cursor: pointer;
  transition: fill 120ms ease, stroke 120ms ease;
}

.odontogram-zone:hover path {
  fill: var(--color-brand-200);
  stroke: var(--color-brand-600);
  stroke-width: 1.5;
}

.odontogram-zone:focus-visible {
  outline: none;
}

.odontogram-zone:focus-visible path {
  fill: var(--color-brand-100);
  stroke: var(--color-brand-600);
  stroke-width: 2;
}