// From Boost blocks.scss in M3.5.

$chart-size: 70px;
$doughnut-border-size: 15px;
$doughnut-dasharray: 173;
$doughnut-empty-colour: $gray-lighter;
$doughnut-fill-colour: $brand-warning;

.progress-chart-container {
    height: $chart-size;
    width: $chart-size;

    .progress-doughnut {
        position: relative;
        height: $chart-size;
        width: $chart-size;
        background-clip: padding-box;
        border: $doughnut-border-size solid $doughnut-empty-colour;
        border-radius: 50%;
        box-sizing: border-box;

        .progress-text {
            position: absolute;
            top: 50%;
            /*rtl:ignore*/
            left: 50%;
            transform: translate(-50%, -50%);
            color: $doughnut-empty-colour;

            &.has-percent {
                color: $doughnut-fill-colour;
            }
        }

        .progress-indicator {
            position: absolute;
            top: ($doughnut-border-size * -1);
            left: ($doughnut-border-size * -1);
            height: $chart-size;
            width: $chart-size;

            svg {
                position: relative;
                height: 100%;
                width: 100%;

                .circle {
                    stroke-width: $doughnut-border-size;
                    stroke: $doughnut-fill-colour;
                    fill: none;
                    stroke-dasharray: $doughnut-dasharray;
                    stroke-dashoffset: $doughnut-dasharray;
                    transform: rotate(-90deg);
                    transform-origin: center center;

                    @for $i from 1 through 100 {
                        &.percent-#{$i} {
                            stroke-dashoffset: $doughnut-dasharray - ($i / 100 * $doughnut-dasharray);
                        }
                    }
                }
            }
        }
    }
}