.progress {
  @apply rounded-box bg-base-content/20 h-2;
  &::-moz-progress-bar {
    @apply bg-base-content rounded-box;
  }
  &-primary::-moz-progress-bar {
    @apply bg-primary rounded-box;
  }
  &-secondary::-moz-progress-bar {
    @apply bg-secondary rounded-box;
  }
  &-accent::-moz-progress-bar {
    @apply bg-accent rounded-box;
  }
  &-info::-moz-progress-bar {
    @apply bg-info rounded-box;
  }
  &-success::-moz-progress-bar {
    @apply bg-success rounded-box;
  }
  &-warning::-moz-progress-bar {
    @apply bg-warning rounded-box;
  }
  &-error::-moz-progress-bar {
    @apply bg-error rounded-box;
  }

  &:indeterminate {
    --progress-color: theme(colors.base-content);
  }
  &-primary:indeterminate {
    --progress-color: theme(colors.primary);
  }
  &-secondary:indeterminate {
    --progress-color: theme(colors.secondary);
  }
  &-accent:indeterminate {
    --progress-color: theme(colors.accent);
  }
  &-info:indeterminate {
    --progress-color: theme(colors.info);
  }
  &-success:indeterminate {
    --progress-color: theme(colors.success);
  }
  &-warning:indeterminate {
    --progress-color: theme(colors.warning);
  }
  &-error:indeterminate {
    --progress-color: theme(colors.error);
  }

  &::-webkit-progress-bar {
    @apply rounded-box bg-transparent;
  }
  &::-webkit-progress-value {
    @apply bg-base-content rounded-box;
  }
  &-primary::-webkit-progress-value {
    @apply bg-primary;
  }
  &-secondary::-webkit-progress-value {
    @apply bg-secondary;
  }
  &-accent::-webkit-progress-value {
    @apply bg-accent;
  }
  &-info::-webkit-progress-value {
    @apply bg-info;
  }
  &-success::-webkit-progress-value {
    @apply bg-success;
  }
  &-warning::-webkit-progress-value {
    @apply bg-warning;
  }
  &-error::-webkit-progress-value {
    @apply bg-error;
  }
}

.progress:indeterminate {
  background-image: repeating-linear-gradient(
    90deg,
    var(--progress-color) -1%,
    var(--progress-color) 10%,
    transparent 10%,
    transparent 90%
  );
  background-size: 200%;
  background-position-x: 15%;
  animation: progress-loading 5s ease-in-out infinite;
}
.progress:indeterminate::-moz-progress-bar {
  @apply bg-transparent;
  background-image: repeating-linear-gradient(
    90deg,
    var(--progress-color) -1%,
    var(--progress-color) 10%,
    transparent 10%,
    transparent 90%
  );
  background-size: 200%;
  background-position-x: 15%;
  animation: progress-loading 5s ease-in-out infinite;
}

@keyframes progress-loading {
  50% {
    background-position-x: -115%;
  }
}
