.circular-progress{--ring-width: 190px;--ring-inner-width: calc(var(--ring-width) * .8);position:relative;width:var(--ring-width);height:var(--ring-width);border-radius:50%;display:flex;justify-content:center;align-items:center}.circular-progress__inner{width:var(--ring-inner-width);height:var(--ring-inner-width);border-radius:50%;background:rgb(var(--color-background));display:flex;justify-content:center;align-items:center;font-size:min(5.5rem,9cqw);font-weight:var(--font-body-weight-bold);line-height:1.1;letter-spacing:-.02em;color:var(--progress-color, var(--bonafide-teal));z-index:1}.circular-progress__background,.circular-progress__progress{position:absolute;width:var(--ring-width);height:var(--ring-width);border-radius:50%;transform:rotate(90deg)}.circular-progress__background{background:var(--bonafide-purple)}.circular-progress__progress{--fill: 0deg;background:conic-gradient(from 0deg,var(--progress-color, var(--bonafide-teal)) 0deg var(--fill),var(--bonafide-purple) var(--fill) 360deg)}.circular-progress__progress.animate{animation:progress-fill 1s ease-in-out forwards}@media (prefers-reduced-motion){.circular-progress__progress{--fill: calc(var(--progress) * 3.6deg)}.circular-progress__progress.animate{animation:none}}@property --fill{syntax: "<angle>"; initial-value: 0deg; inherits: false;}@keyframes progress-fill{to{--fill: calc(var(--progress) * 3.6deg)}}.circular-progress__background:before,.circular-progress__progress:before{content:"";position:absolute;top:15px;right:15px;bottom:15px;left:15px;border-radius:50%;background:var(--color-white)}@media screen and (max-width: 767px){.circular-progress{--ring-width: 130px}}
/*# sourceMappingURL=/cdn/shop/t/1291/assets/circular-progress.css.map */