@layer kz-components {
  .subtext {
    color: var(--color-purple-800);
    padding-top: var(--spacing-6);
    text-align: center;
    opacity: 0.8;
  }

  .progressBackground {
    width: 100%;
    background: var(--color-gray-300);
    border-radius: 10px;
    height: 10px;
    overflow: hidden;
    position: relative;
  }

  .progress {
    position: absolute;
    inset: 0;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 200ms ease;
    background-color: var(--progressbar-background-color);
  }

  /* ------------------------------
  Colors
  ------------------------------ */
  .blue {
    --progressbar-background-color: var(--color-blue-400);
  }

  .green {
    --progressbar-background-color: var(--color-green-400);
  }

  .red {
    --progressbar-background-color: var(--color-red-400);
  }

  .yellow {
    --progressbar-background-color: var(--color-yellow-400);
  }

  .isAnimating {
    &::after {
      background: linear-gradient(90deg, transparent, var(--color-white) 75%, transparent);
      opacity: 0.25;
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: 50%;
      animation: pulse 2s infinite;
      transition: opacity 0.2s;
    }
  }
}

@keyframes pulse {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(200%);
  }
}