$m-pieChart_g_size = 120px;

// Component:       `m-pieChart`
// ========================================================================

.m-pieChart {
    svg {
        $size: 100%;
        display: block;
        margin: 0 auto;

        > g {
            width: $m-pieChart_g_size;
            height: $m-pieChart_g_size;
        }
    }

    .pieChart_item {
        fill: blue;
        stroke: white;
        stroke-width: 0.5px;
        $transition: opacity 0.2s ease;
    }

    .pieChart_item:hover {
        opacity: 0.8;
    }

    .pieChart_text {
        position: absolute;
        top: 50%;
        left: 50%;
        text-align: center;
        font-size: 12px;
        transform: translate(-50%, -50%);
        color: white;
        cursor: default;

        .u-tooltip {
            display: none;
        }
    }

    .pieChart_text:hover {
        z-index: 1;

        .u-tooltip {
            display: block;
            position: absolute;
            margin-left: 100%;
            left: 8px;
            top: 0;
        }
    }
}

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