@property --percentage
{
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}

[role="radbar"]
{
    --percentage: var(--value);
    background: conic-gradient(var(--color) calc(var(--percentage) * 1%), 0, transparent);
    border-radius: var(--size);
    width: var(--size);
    height: var(--size);
    margin-left: var(--p-left);
    align-content: center;
    align-self: center;
    text-align: end;
}

[role="radtext"]
{
    font-family: Roboto;
    font-size: 14px;
    font-weight: 600;
    color: var(--color);
    text-align: center;
    margin-top: 1px;
    margin-left: 0px;
    user-select: none;
}