@property --percentage {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}
[is=progress-bar] {
  display: none;
}
[is=progress-bar].is\:loaded + label .ring.progress {
  transition: stroke-dashoffset var(--transition), fill 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s;
}
[is=progress-bar] + label {
  --progress-bar-size: 80px;
  --progress-bar-width: var(--progress-bar-size);
  --progress-bar-height: var(--progress-bar-size);
  width: var(--progress-bar-width);
  height: var(--progress-bar-height);
  display: grid;
  margin-top: var(--progress-bar-stroke-width, 8px);
  transition: --percentage 1s;
  counter-set: percentage var(--percentage);
  display: grid;
  place-content: center;
  place-items: center;
}
[is=progress-bar] + label .ring, [is=progress-bar] + label:after {
  grid-row: 1;
  grid-column: 1;
  justify-content: center;
  align-content: center;
}
[is=progress-bar] + label .ring {
  --percentage: inherit;
  fill: transparent;
  width: inherit;
  height: inherit;
  stroke-width: var(--progress-bar-stroke-width, 8px);
}
[is=progress-bar] + label .ring.progress {
  stroke: url(#brand-gradient);
  stroke-dashoffset: calc(-1px * var(--stroke-dasharray) / 100 * (100 + var(--percentage)));
  stroke-dasharray: var(--stroke-dasharray);
  transform: rotate(-90deg);
}
[is=progress-bar] + label .ring.background {
  stroke: #F7F7F7;
}
[is=progress-bar] + label .check {
  opacity: 0;
  width: 50%;
  height: 50%;
  grid-row: 1;
  grid-column: 1;
  transform: scale(0.8);
  --symbol-colour: url(#brand-gradient);
  pointer-events: none;
  transition: opacity var(--transition), transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
[is=progress-bar] + label:after {
  content: counter(percentage) "%";
  display: flex;
  place-content: center;
  place-items: center;
  font-weight: 700;
  position: relative;
  min-width: 5ch;
  color: var(--font-colour, #666666) !important;
  transform: scale(1);
  transition: opacity var(--transition), transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
[is=progress-bar] + label[style*="--percentage:100"] .check, [is=progress-bar] + label[style*="--percentage: 100"] .check {
  opacity: 1;
  transform: scale(1);
}
[is=progress-bar] + label[style*="--percentage:100"]::after, [is=progress-bar] + label[style*="--percentage: 100"]::after {
  opacity: 0;
  transform: scale(0.8);
}
[is=progress-bar] + label:not([style*="--percentage"]) .ring, [is=progress-bar] + label[style*="--percentage:0"] .ring, [is=progress-bar] + label[style*="--percentage: 0"] .ring {
  transition-delay: 0s, 1s;
}
[is=progress-bar] + label:not([style*="--percentage"]) .background, [is=progress-bar] + label[style*="--percentage:0"] .background, [is=progress-bar] + label[style*="--percentage: 0"] .background {
  fill: white;
}

.progress-bar[data-react] {
  width: var(--bar-size, 2em);
  height: var(--bar-size, 2em);
  pointer-events: none;
}
.progress-bar[data-react].brand {
  --fg-default: 'url(#brand-gradient)';
}
.progress-bar[data-react].success {
  --fg-default: 33, 183, 85;
}
.progress-bar[data-react].success .progress {
  stroke: var(--bar-fg-stroke, rgb(var(--fg-default)));
}
.progress-bar[data-react].warning {
  --fg-default: 252, 153, 0;
}
.progress-bar[data-react].warning .progress {
  stroke: var(--bar-fg-stroke, rgb(var(--fg-default)));
}
.progress-bar[data-react].error {
  --fg-default: 201, 0, 35;
}
.progress-bar[data-react].error .progress {
  stroke: var(--bar-fg-stroke, rgb(var(--fg-default)));
}
.progress-bar[data-react].is\:loaded progress + label .ring {
  transition: stroke-dashoffset var(--transition), stroke var(--transition), fill 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s;
}
.progress-bar[data-react] progress {
  display: none;
}
.progress-bar[data-react] progress + label {
  --percentage-amount: calc(var(--stroke-dasharray) * (var(--percentage) / 100));
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
}
.progress-bar[data-react] progress + label .ring {
  width: 100%;
  height: 100%;
  fill: transparent;
  stroke-width: var(--bar-thickness, 10px);
  transform: rotate(-90deg);
}
.progress-bar[data-react] progress + label .ring circle {
  r: calc(50% - var(--bar-thickness, 10px) * 0.5);
}
.progress-bar[data-react] progress + label .ring.progress {
  --percentage: inherit;
  stroke-dasharray: var(--stroke-dasharray);
  stroke-dashoffset: calc(var(--stroke-dasharray) - var(--percentage-amount));
  z-index: 1;
}
.progress-bar[data-react] progress + label .ring.background {
  position: absolute;
  top: 0;
  left: 0;
  stroke: var(--bar-bg-stroke, #F7F7F7);
  z-index: 0;
}
/*# sourceMappingURL=../sourcemaps/components/progress-bar.css.map */