/******************************************************************************
 *
 * Copyright GuardianGamer, Inc - All Rights Reserved.
 * Unauthorized copying of this file, via any medium is strictly prohibited.
 * Proprietary and confidential.
 *
 *****************************************************************************/
.progress-circle {
    width: 100%;
    height: 100%;
    --size: 100%;
    --half-size: calc(var(--size) / 2);
    --stroke-width: 10%;
    --radius: calc((var(--size) - var(--stroke-width)) / 2);
    --circumference: calc(var(--radius) * pi * 2);
    --dash: calc((var(--progress) * var(--circumference)) / 100);
    --progress: 50;

    --background-color: #20202080;
    --color: #0FA90F;
    --color-text: white;
}
  
.progress-circle circle {
    cx: var(--half-size);
    cy: var(--half-size);
    r: var(--radius);
    stroke-width: var(--stroke-width);
    fill: none;
    stroke-linecap: round;
}
  
.progress-circle circle.bg {
    fill: var(--background-color);
}
  
.progress-circle circle.fg {
    transform: rotate(-90deg);
    transform-origin: var(--half-size) var(--half-size);
    stroke-dasharray: var(--dash) calc(var(--circumference) - var(--dash));
    stroke: var(--color);
}
 
.progress-text {
    font-size: 1.5em;
    fill: var(--color-text);
}

@property --progress {
    syntax: "<number>";
    inherits: false;
    initial-value: 0;
}