@layer components{.CircularProgress{--hue:220;--track-size:4px;--track-bg:var(--dimmed-1);aspect-ratio:1/1;display:grid;font-size:1rem;font-weight:token(--wds-wds-font-weight-bold);inline-size:4rem;min-inline-size:64px;place-items:center;position:relative}.CircularProgress[data-circular-progress-show-progress=true]:after{content:attr(data-circular-progress);display:block}.CircularProgress[data-circular-progress-dimension=regular]{--track-size:8px;font-size:1.75rem;inline-size:8.5rem}.CircularProgress[data-circular-progress-dimension=big]{--track-size:16px;font-size:2.5rem;inline-size:11.5rem}.CircularProgress:before{background:conic-gradient(var(--progress-color,var(--cta-default)),var(--progress-color,var(--cta-default)) var(--progress,0),var(--track-bg) var(--progress,0) 100%);border-radius:50%;bottom:0;content:"";left:0;mask-image:radial-gradient(transparent calc(71% - var(--track-size)),#000 calc(71% - var(--track-size) + .5px));position:absolute;right:0;top:0;z-index:0}}