@property --progress {
  syntax: '<integer>';
  initial-value: 0;
  inherits: true;
}

@property --progress-from {
  syntax: '<integer>';
  initial-value: 0;
  inherits: true;
}

@property --progress-to {
  syntax: '<integer>';
  initial-value: 100;
  inherits: true;
}

@keyframes progress {
  from {
    --progress: var(--progress-from);
  }
  to {
    --progress: var(--progress-to);
  }
}

.p-workStreams-working,
.p-workStreams-notWorking {
  @apply relative flex flex-wrap justify-between gap-2;

  .RPB,
  .progress .progress-stats-label {
    @apply hidden;
  }

  .progress {
    @apply w-full text-sm;
  }
}

.p-workStreams .block {
  @apply flex items-end justify-end rounded-lg border border-gray-300 p-4;
}

.p-workStreams .block.animated .progress-percent-label {
  @apply [animation:progress_1s_forwards_ease-out];
}

.p-workStreams .block:has(+ .block) {
  @apply mb-2;
}

.p-workStreams .block .button {
  @apply btu-button btu-button-primary btu-button-md order-5 mt-4;
}

.progress-percent-label {
  @apply order-2 mt-2 text-sm font-medium text-gray-700 [counter-reset:progress_var(--progress)] before:absolute before:[content:counter(progress)'%'];
}

/* Reserve the space of the original text while the progress is animating to avoid layout shift. */
.progress-percent-label > span {
  @apply invisible;
}

.progress-stats-label {
  @apply order-2 ms-auto text-sm font-normal text-gray-500;
}

.progress {
  @apply order-3 h-2 rounded-lg bg-gray-100;
}

.progress .progressBar {
  @apply h-full w-0 rounded-lg bg-primary-600;
}

.block.animated .progress .progressBar {
  @apply transition-all duration-1000 [width:calc(1%_*_var(--progress-to))];
}

.p-workStreams-working-info {
  @apply order-1 mb-2 flex-[1_0_100%] text-sm;
}

.p-workStreams-working-info a {
  @apply font-semibold text-primary-600 no-underline hover:text-primary-800 focus:text-primary-600;
}

.p-workStreams-continue {
  @apply !order-last;
}

.p-workStreams-stop {
  @apply !btu-button-gray;
}
