@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 {
  width: 100%;
  background: #f3f2f2;
  height: 0.5em;
  border-radius: 0.5em;
  box-shadow: 0 0 0 0.0625em #969087;
  position: relative;
}
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 {
  height: 0.625em;
  background-color: #005d92;
  width: calc(var(--progress-value) + 0.125em);
  transition: width 0.4s cubic-bezier(0.7, 0, 0.3, 1), border-radius 0.4s cubic-bezier(0.7, 0, 0.3, 1);
  border-radius: 0.5em 0 0 0.5em;
  position: absolute;
  top: -0.0625em;
  left: -0.0625em;
}