:host {
  --color-progress-fill: var(--pine-color-mercury-500);
  --sizing-progress-bar-height: 8px;
  --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 {
  --border-radius: var(--pine-border-radius-050);
  --color-progress-bar-background: var(--pine-color-grey-200);
  align-items: center;
  background-color: var(--color-progress-bar-background);
  border-radius: var(--border-radius);
  display: flex;
  flex-direction: row;
  height: var(--sizing-progress-bar-height);
  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(--sizing-progress-bar-height);
  width: 100%;
}

progress::-webkit-progress-value {
  --border-radius: var(--pine-border-radius-050);
  --color-background: var(--pine-color-mercury-500);
  background-color: var(--color-progress-fill, var(--color-background));
  border-radius: var(--border-radius);
}

progress::-moz-progress-bar {
  --border-radius: var(--pine-border-radius-050);
  --color-background: var(--pine-color-mercury-500);
  background-color: var(--color-progress-fill, var(--color-background));
  border-radius: var(--border-radius);
}

.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);
  --spacing-inline-start-margin: var(--pine-spacing-300);
  font-weight: var(--font-weight);
  margin-inline-start: calc(var(--spacing-inline-start-margin) / 2);
}