:host {
  --wcs-progress-bar-border-radius: var(--wcs-semantic-border-radius-full);
  --wcs-progress-bar-border-radius-small: var(--wcs-semantic-border-radius-small);
  --wcs-internal-progress-bar-animation-duration: var(--wcs-progress-bar-animation-duration, var(--wcs-semantic-motion-duration-feedback-slower)); /* internal used by horizontal-stepper */
  --wcs-progress-bar-height-m: calc(var(--wcs-semantic-size-m) / 4);
  --wcs-progress-bar-height-s: calc(var(--wcs-semantic-size-s) / 6);
  --wcs-progress-bar-background-color: transparent;
  --wcs-progress-bar-rail-color: var(--wcs-semantic-color-background-surface-tertiary);
  --wcs-progress-bar-rail-spacing: var(--wcs-semantic-spacing-small);
  --wcs-progress-bar-gap-s: var(--wcs-semantic-spacing-small);
  --wcs-progress-bar-gap-m: var(--wcs-semantic-spacing-base);
  --wcs-progress-bar-indicator-color: var(--wcs-semantic-color-background-surface-brand);
  --wcs-progress-bar-label-color: var(--wcs-semantic-color-text-primary);
  --wcs-progress-bar-label-font-size-s: var(--wcs-semantic-font-size-s);
  --wcs-progress-bar-label-font-size-m: calc(1.5 * var(--wcs-semantic-font-size-m));
  --wcs-progress-bar-label-font-weight: var(--wcs-semantic-font-weight-medium);
  --wcs-progress-bar-label-percentage-font-size-s: calc(var(--wcs-semantic-font-size-s) * 0.7);
  --wcs-progress-bar-label-percentage-font-size-m: calc(var(--wcs-semantic-font-size-m) * 0.7);
  --wcs-progress-bar-label-top-space: var(--wcs-semantic-spacing-large);
}

:host([size=s]) .progress {
  height: var(--wcs-progress-bar-height-s);
  background-color: var(--wcs-progress-bar-background-color);
  background-image: none;
  background-size: auto;
  border-radius: var(--wcs-progress-bar-border-radius-small);
}
:host([size=s]) .progress .progress-label {
  font-size: var(--wcs-progress-bar-label-font-size-s);
  bottom: calc(100% + var(--wcs-progress-bar-gap-s));
}
:host([size=s]) .progress .progress-label sup {
  font-size: var(--wcs-progress-bar-label-percentage-font-size-s);
}

.progress {
  display: flex;
  height: var(--wcs-progress-bar-height-m);
  color: var(--wcs-progress-bar-label-color);
  background-color: var(--wcs-progress-bar-background-color);
  background-image: linear-gradient(90deg, var(--wcs-progress-bar-rail-color), 50%, transparent 50%);
  background-size: var(--wcs-progress-bar-rail-spacing) var(--wcs-progress-bar-height-m);
  border-radius: var(--wcs-progress-bar-border-radius);
}
.progress.has-label {
  margin-top: var(--wcs-progress-bar-label-top-space);
}
.progress.value-zero > .progress-bar > .progress-label {
  right: unset;
}

.progress-bar {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--wcs-progress-bar-label-color);
  text-align: center;
  background-color: var(--wcs-progress-bar-indicator-color);
  border-radius: var(--wcs-progress-bar-border-radius);
  transition: width var(--wcs-internal-progress-bar-animation-duration) ease-out;
}

.progress-label {
  line-height: 1;
  position: absolute;
  right: 0;
  bottom: calc(100% + var(--wcs-progress-bar-gap-m));
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  font-size: var(--wcs-progress-bar-label-font-size-m);
  font-weight: var(--wcs-progress-bar-label-font-weight);
}
.progress-label sup {
  font-size: var(--wcs-progress-bar-label-percentage-font-size-m);
}