/**
 * @file
 * Loading state for katakana fields.
 */

.kana-name--loading {
  background-image: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 20%,
    rgba(0, 0, 0, 0.04) 40%,
    rgba(255, 255, 255, 0) 60%
  );
  background-size: 200% 100%;
  animation: kana-name-shimmer 1.1s linear infinite;
}

@keyframes kana-name-shimmer {
  0% {
    background-position: 150% 0;
  }
  100% {
    background-position: -50% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kana-name--loading {
    animation: none;
    background-image: none;
    opacity: 0.6;
  }
}