@import '../1-Helpers/variables';

$svgSize: 120px;

.radial-progress {
    position: relative;
    display: inline-block;

    svg {
        .progressBar {
            fill: transparent;
            stroke: $primary-color;
            stroke-linecap: round;
            transform: rotate(-90deg);
            transform-origin: center center;
            transition: $transition-slow-out;
        }

        .track {
            fill: transparent;
            opacity: .15;
        }

        // flavours
        &[data-state="green"] {
            .progressBar, .track {
                stroke: $green;
            }
        }
        &[data-state="orange"] {
            .progressBar, .track {
                stroke: $orange;
            }
        }
        &[data-state="red"] {
            .progressBar, .track {
                stroke: $red;
            }
        }
    }
    
    .textContainer {
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    &.primary {
        background: none !important;

        .progressBar {
            stroke: $primary-color;
        }
    }

    &.secondary {
        background: none !important;

        .progressBar {
            stroke: $secondary-color;
        }
    }
}