/* CSS especifico da atividade "scrambled-letters". */

/* Indicador de inserção ao arrastar uma letra sobre a caixa de resposta:
   uma linha na lateral esquerda ou direita da peça mostra onde ela vai
   entrar — mesma técnica de image-sequencing.css, adaptada de imagens pra
   letras. */
[data-tipo="embaralhar-letras"] .el-tag[data-insercao="antes"]::before,
[data-tipo="embaralhar-letras"] .el-tag[data-insercao="depois"]::after {
  content: '';
  position: absolute;
  top: -.25rem;
  bottom: -.25rem;
  width: 3px;
  border-radius: 9999px;
  background: #6366f1;
}
[data-tipo="embaralhar-letras"] .el-tag[data-insercao="antes"]::before { left: -.4rem; }
[data-tipo="embaralhar-letras"] .el-tag[data-insercao="depois"]::after { right: -.4rem; }