[data-carregando] {
  position: relative;
  pointer-events: none;
  cursor: progress;
  -webkit-text-fill-color: transparent;
}

[data-carregando] > * {
  visibility: hidden;
}

[data-carregando]::after {
  content: "";

  position: absolute;
  inset: 0;
  margin: auto;

  inline-size: 1rem;
  block-size: 1rem;

  border: 2px solid currentColor;
  border-block-start-color: transparent;
  border-radius: 9999px;

  animation: carregamento-girar 700ms linear infinite;
}

@keyframes carregamento-girar {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-carregando]::after {
    animation-duration: 2s;
  }
}