.ga-progress {
  @apply flex flex-col gap-1;

  .ga-progress__label {
    @apply text-sm/5 text-(--ga-color-text-action);
  }

  .ga-progress__helper {
    @apply flex flex-row items-center gap-1 text-xs text-(--ga-color-text-body);
  }

  .ga-progress__buffer {
    @apply relative h-1 w-full overflow-hidden rounded bg-(--ga-color-surface-disabled);
  }

  .ga-progress__bar {
    @apply absolute h-full w-full origin-top-left rounded bg-(--ga-color-surface-progress);
  }

  &.ga-progress--success {
    .ga-progress__bar {
      @apply bg-(--ga-color-icon-success);
    }

    .ga-progress__helper .ga-icon {
      @apply text-(--ga-color-icon-success);
    }
  }

  &.ga-progress--error {
    .ga-progress__bar {
      @apply bg-(--ga-color-icon-error);
    }

    .ga-progress__helper .ga-icon {
      @apply text-(--ga-color-icon-error);
    }
  }

  &.ga-progress--indeterminate {
    .ga-progress__bar {
      @apply w-1/5 animate-[ga-progress-animation_1400ms_linear_infinite];
    }
  }
}

@keyframes ga-progress-animation {
  0% {
    transform: translateX(-100%);
  }

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