.p-progressbar {
  @apply relative h-5 overflow-hidden rounded-md bg-surface-200 dark:bg-surface-700;
}

.p-progressbar-value {
  @apply m-0 bg-primary;
}

.p-progressbar-label {
  @apply text-xs font-semibold text-primary-contrast;
}

.p-progressbar-determinate .p-progressbar-value {
  @apply absolute flex h-full w-0 items-center justify-center overflow-hidden transition-[width] duration-1000 ease-in-out;
}

.p-progressbar-determinate .p-progressbar-label {
  @apply inline-flex;
}

.p-progressbar-indeterminate .p-progressbar-value::before {
  @apply absolute bottom-0 start-0 top-0 bg-inherit will-change-[inset-inline-start,inset-inline-end] content-[''];
}

.p-progressbar-indeterminate .p-progressbar-value::before {
  animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}

.p-progressbar-indeterminate .p-progressbar-value::after {
  @apply absolute bottom-0 start-0 top-0 bg-inherit will-change-[inset-inline-start,inset-inline-end] content-[''];
}

.p-progressbar-indeterminate .p-progressbar-value::after {
  animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
  animation-delay: 1.15s;
}

@keyframes p-progressbar-indeterminate-anim {
  0% {
    inset-inline-start: -35%;
    inset-inline-end: 100%;
  }
  60% {
    inset-inline-start: 100%;
    inset-inline-end: -90%;
  }
  100% {
    inset-inline-start: 100%;
    inset-inline-end: -90%;
  }
}

@keyframes p-progressbar-indeterminate-anim-short {
  0% {
    inset-inline-start: -200%;
    inset-inline-end: 100%;
  }
  60% {
    inset-inline-start: 107%;
    inset-inline-end: -8%;
  }
  100% {
    inset-inline-start: 107%;
    inset-inline-end: -8%;
  }
}
