$m-donutChart_g_size = 120px;

// Component:       `m-donutChart`
// ========================================================================

.m-donutChart {
    svg {
        $size: 100%;

        > g {
            width: $m-donutChart_g_size;
            height: $m-donutChart_g_size;

            > circle {
                fill: white;
            }
        }
    }

    .donutChart_item {
        fill: none;
        stroke: blue;
        stroke-width: 20px;
        $transition: opacity 0.2s ease;
    }

    .donutChart_item:hover {
        opacity: 0.8;
    }

    .donutChart_text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        text-align: center;
        font-size: 14px;
    }
}

.m-donutChart .donutChart_item-1 { stroke: rgb(0,153,255); }
.m-donutChart .donutChart_item-2 { stroke: rgb(255,174,60); }
.m-donutChart .donutChart_item-3 { stroke: rgb(78,201,171); }
.m-donutChart .donutChart_item-4 { stroke: rgb(245,131,122); }
.m-donutChart .donutChart_item-5 { stroke: rgb(158,156,246); }