@property --metric-sweep{syntax: "<percentage>"; initial-value: 100%; inherits: false;}.metrics{display:grid;gap:var(--space-8) var(--space-6);margin:0;padding:0;list-style:none;--metric-start: 5%;--metric-end: 40%}.metric{position:relative;display:flex;flex-direction:column;align-items:var(--section-text-align, center);gap:var(--space-3)}.metrics--ring,.metrics--pie{grid-template-columns:repeat(2,minmax(0,1fr));justify-items:var(--section-text-align, center)}@media(min-width:750px){.metrics--ring,.metrics--pie{grid-template-columns:repeat(var(--metric-columns, 3),minmax(0,1fr))}}.metric__ring{position:relative;display:grid;place-items:center;width:var(--metric-size, 8.5rem);aspect-ratio:1}.metric__ring:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:conic-gradient(var(--metric-color, var(--color-accent)) var(--metric-sweep),rgb(var(--color-foreground-rgb) / .12) 0);--metric-sweep: calc(var(--metric-value, 0) * 1%)}.metrics--ring .metric__ring:before{-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - var(--metric-thickness, 10px)),#000 calc(100% - var(--metric-thickness, 10px) + 1px));mask:radial-gradient(farthest-side,transparent calc(100% - var(--metric-thickness, 10px)),#000 calc(100% - var(--metric-thickness, 10px) + 1px))}.metric__ring-value{position:relative;font-size:var(--text-xl);font-weight:600;font-variant-numeric:tabular-nums}.metrics--pie .metric__label{display:flex;flex-direction:column;align-items:center;gap:2px}.metrics--pie .metric__value{font-size:var(--text-lg);font-variant-numeric:tabular-nums}.metrics--ring .metric__label,.metrics--pie .metric__label{margin:0;font-weight:600}.metrics--bar{grid-template-columns:minmax(0,1fr);gap:var(--space-6)}.metrics--bar .metric{align-items:stretch;gap:var(--space-2)}.metric__row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4)}.metric__row .metric__label{font-weight:600}.metric__value{font-weight:600;color:var(--metric-color, var(--color-accent))}.metric__bar{height:var(--metric-bar-height, 8px);border-radius:var(--metric-bar-radius, 999px);background-color:rgb(var(--color-foreground-rgb) / .12);overflow:clip}.metric__fill{display:block;width:calc(var(--metric-value, 0) * 1%);height:100%;border-radius:inherit;background-color:var(--metric-color, var(--color-accent));transform-origin:left center}.metric__text{margin:0;font-size:var(--text-sm);opacity:.7}@supports (animation-timeline: view()){@media(prefers-reduced-motion:no-preference){.metric__ring:before,.metric__fill{animation-timing-function:linear;animation-fill-mode:both;animation-timeline:view();animation-range:cover var(--metric-start) cover var(--metric-end);animation-delay:var(--metric-delay, 0ms)}.metric__ring:before{animation-name:metric-ring}.metric__fill{animation-name:metric-bar}}}@keyframes metric-ring{0%{--metric-sweep: 0%}to{--metric-sweep: calc(var(--metric-value, 0) * 1%)}}@keyframes metric-bar{0%{transform:scaleX(0)}to{transform:scaleX(1)}}
/*# sourceMappingURL=/cdn/shop/t/6/assets/metrics.css.map */