@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: bold;
    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}
}