@property --percent{syntax:'<number>';inherits:true;initial-value:0}.pie-charts-element{text-align:center}.pie-charts-element .pie{--percent:20;--border:22px;--color:darkred;--width:150px;width:var(--width);aspect-ratio:1;position:relative;display:inline-grid;margin:5px;place-content:center;font-size:25px;font-weight:700;text-align:center}.pie-charts-element .pie:before,.pie-charts-element .pie:after{content:"";position:absolute;border-radius:50%}.pie-charts-element .pie:before{inset:0;background:radial-gradient(farthest-side,var(--color) 98%,#0000) top/var(--border) var(--border) no-repeat,conic-gradient(var(--color) calc(var(--percent)*1%),var(--border-bg,#fff) 0);-webkit-mask:radial-gradient(farthest-side,#0000 calc(99% - var(--border)),#000 calc(100% - var(--border)));mask:radial-gradient(farthest-side,#0000 calc(99% - var(--border)),#000 calc(100% - var(--border)))}.pie-charts-element .pie:after{inset:calc(50% - var(--border)/2);background:var(--color);transform:rotate(calc(var(--percent)*3.6deg)) translateY(calc(50% - var(--width)/2))}.pie-charts-element .animate{animation:p-animate 1s .5s both}.pie-charts-element .no-round:before{background-size:0 0,auto}.pie-charts-element .no-round:after{content:none}.pie-charts-element .pie-text{width:100%;margin-top:4px;font-size:15px;font-weight:400}@keyframes p-animate{from{--percent:0}}