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

PostNord Web Components

/* Global utility variables */
/* Input styles */
/* Transition variables */
pn-progress-bar .pn-progress-bar-label {
  margin-bottom: 0.5em;
  color: #2d2013;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5em;
}
pn-progress-bar .pn-progress-bar-subtext {
  margin-top: 0.5em;
  color: #5e554a;
  font-weight: 400;
}
pn-progress-bar .pn-progress-bar-container {
  overflow: hidden;
  padding: 0.0625em;
  height: 0.75em;
  border-radius: 0.5em;
}
pn-progress-bar .pn-progress-bar-meter {
  position: relative;
  width: 100%;
  background: #f3f2f2;
  height: 0.625em;
  border-radius: 0.5em;
  box-shadow: 0 0 0 0.0625em #969087;
}
pn-progress-bar .pn-progress-bar-value {
  position: absolute;
  top: -0.0625em;
  left: -0.0625em;
  height: 0.75em;
  background-color: #005d92;
  width: var(--progress-value);
  border-radius: 0.5em 0 0 0.5em;
  transition-property: width, border-radius, background-color;
  transition-duration: 0.2s, 0.2s, 0.5s;
  transition-timing-function: linear;
}
pn-progress-bar .pn-progress-bar-value[data-valid] {
  width: calc(var(--progress-value) + 0.125em);
  background-color: #0aa85c;
  border-top-right-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
}
pn-progress-bar .pn-progress-bar-value[data-error] {
  background-color: #a70707;
}