/* Animate the merchant dashboard performance ring in sync with its percentage counter. */
.score-ring {
    position: relative;
    background: #fff !important;
}

.score-ring svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.score-ring circle {
    fill: none;
    stroke-width: 14;
}

.score-ring-track {
    stroke: #edf0f3;
}

.score-ring-progress {
    stroke: var(--dream-red);
    stroke-linecap: butt;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    will-change: stroke-dashoffset;
}

.score-ring span {
    position: relative;
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    .score-ring-progress {
        stroke-dashoffset: calc(100 - var(--score));
    }
}