.progress-meter-wrapper{justify-items:space-between;font-size:var(--font-size);grid-template-columns:1fr auto;display:grid}.progress-meter-wrapper .meter-label{font-weight:var(--font-weight-medium)}.progress-meter-wrapper .meter-value{justify-self:end}.progress-meter-wrapper .meter{background-color:var(--progress-stroke-bg);border-radius:var(--radius-full);grid-column:1/-1;width:100%;margin-block-start:.25rem;display:block;position:relative;overflow:hidden}.progress-meter-wrapper .meter:after{content:"";background-color:var(--progress-stroke-color);height:100%;width:var(--width);transition:width var(--duration-md) var(--cubic-bezier);position:absolute;inset:0}.meter-size--sm{height:.25rem}.meter-size--md{height:.5rem}.meter-size--lg{height:1rem}.progress-meter-color--accent{--progress-stroke-color:var(--color-accent-graphic)}.progress-meter-color--accent,.progress-meter-color--green,.progress-meter-color--orange,.progress-meter-color--red{--progress-stroke-bg:var(--color-track)}.progress-meter-color--green{--progress-stroke-color:var(--color-green-graphic)}.progress-meter-color--orange{--progress-stroke-color:var(--color-orange-graphic)}.progress-meter-color--red{--progress-stroke-color:var(--color-red-graphic)}.progress-circle-wrapper{--progress-circle-bg:transparent;--half-size:calc(var(--size) / 2);--radius:calc(.5 * (var(--size) - var(--progress-stroke-width)));--circumference:calc(var(--radius) * 6.28319);--dash:calc((var(--progress-circle-value) * var(--circumference)) / var(--progress-circle-max));width:var(--size);height:var(--size);font-size:var(--font-size);font-weight:var(--font-weight-semibold);place-content:center;display:grid;position:relative}.progress-circle-wrapper .progress-circle-label{color:var(--progress-label-color)}.progress-circle-wrapper .progress-circle{position:absolute;inset:0}.progress-circle-wrapper .progress-circle svg{width:var(--size);height:var(--size)}.progress-circle-wrapper .progress-circle circle{cx:var(--half-size);cy:var(--half-size);r:var(--radius);fill:#0000;stroke-width:var(--progress-stroke-width)}.progress-circle-wrapper .progress-circle circle.bg{stroke:var(--progress-stroke-bg);fill:var(--progress-circle-bg)}.progress-circle-wrapper .progress-circle circle.fg{stroke:var(--progress-stroke-color);stroke-width:var(--progress-stroke-width);stroke-dasharray:var(--dash) calc(var(--circumference) - var(--dash));transform-origin:var(--half-size) var(--half-size);transition:stroke var(--duration-sm) ease-in-out,stroke-dasharray var(--duration-md) var(--cubic-bezier);transform:rotate(-90deg)}.progress-circle-color--accent{--progress-label-color:var(--color-accent-text);--progress-stroke-color:var(--color-accent-graphic);--progress-stroke-bg:var(--color-track)}.progress-circle-color--green{--progress-label-color:var(--color-green-text);--progress-stroke-color:var(--color-green-graphic);--progress-stroke-bg:var(--color-track)}.progress-circle-color--orange{--progress-label-color:var(--color-orange-text);--progress-stroke-color:var(--color-orange-graphic);--progress-stroke-bg:var(--color-track)}.progress-circle-color--red{--progress-label-color:var(--color-red-text);--progress-stroke-color:var(--color-red-graphic);--progress-stroke-bg:var(--color-track)}.progress-circle-size--xl{--size:8rem;--progress-stroke-width:10px}.progress-circle-size--lg{--size:6rem;--progress-stroke-width:8px}.progress-circle-size--md{--size:4rem;--progress-stroke-width:5px}.progress-circle-size--sm{--size:3rem;--progress-stroke-width:3px}.progress-circle-size--xs{--size:2.5rem;--progress-stroke-width:3px}.demo-page.meter .progress-meter-card{max-width:420px}.demo-page.meter .grid-wrapper{--gap:1rem;gap:var(--gap);display:grid}
