.text-loader {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;

  &__line {
    height: 1rem;
    background: linear-gradient(
      90deg,
      var(--c--contextuals--background--semantic--neutral--secondary) 25%,
      var(--c--contextuals--background--semantic--neutral--secondary-hover) 50%,
      var(--c--contextuals--background--semantic--neutral--secondary) 75%
    );
    background-size: 200% 100%;
    border-radius: 4px;
    animation: text-loading 1.5s ease-in-out infinite;

    &--short {
      width: 85%;
    }
  }
}

@keyframes text-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

