@postnord/web-components/collection/components/feedback/pn-progress-stepper/pn-progress-stepper.css

PostNord Web Components

/* Global utility variables */
/* Input styles */
/* Transition variables */
pn-progress-stepper .pn-progress-stepper {
  position: relative;
  width: 100%;
  background: #f3f2f2;
  height: 0.5em;
  border-radius: 0.5em;
  box-shadow: 0 0 0 0.0625em #969087;
}
pn-progress-stepper .pn-progress-stepper[data-full] .pn-progress-stepper-value {
  border-top-right-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
}
pn-progress-stepper .pn-progress-stepper-label {
  margin-bottom: 0.5em;
}
pn-progress-stepper .pn-progress-stepper-value {
  position: absolute;
  top: -0.0625em;
  left: -0.0625em;
  height: 0.625em;
  background-color: #005d92;
  width: calc(var(--progress-value) + 0.125em);
  border-radius: 0.5em 0 0 0.5em;
  transition-property: width, border-radius;
  transition-duration: 0.4s;
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
  pn-progress-stepper .pn-progress-stepper-value {
    transition-duration: 0s;
    transition-delay: 0s;
  }
}