:host {
  --color-progress-fill: var(--pine-color-primary);
  --sizing-progress-bar-width: 100%;
  align-items: center;
  display: flex;
  width: var(--sizing-progress-bar-width);
}

@keyframes progressBar {
  0% {
    width: 0;
  }
  100% {
    width: var(--sizing-progress-bar-width);
  }
}
.pds-progress {
  align-items: center;
  background-color: var(--pine-color-background-muted);
  border-radius: var(--pine-dimension-2xs);
  display: flex;
  flex-direction: row;
  height: var(--pine-dimension-xs);
  position: relative;
  width: 100%;
}

:host(.is-animated) progress,
:host(.is-animated) progress::-webkit-progress-bar {
  animation: progressBar 3s ease;
  animation-fill-mode: forwards;
}

progress,
progress::-webkit-progress-bar {
  background-color: transparent;
  border: 0;
  height: var(--pine-dimension-xs);
  width: 100%;
}

progress::-webkit-progress-value {
  background: var(--color-progress-fill, var(--pine-color-primary));
  border-radius: var(--pine-dimension-2xs);
}

progress::-moz-progress-bar {
  background: var(--color-progress-fill, var(--pine-color-primary));
  border-radius: var(--pine-dimension-2xs);
}

.pds-progress__label {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.pds-progress__percentage {
  font-weight: var(--pine-font-weight-medium);
  margin-inline-start: calc(var(--pine-dimension-md) / 2);
}