// LEGEND
.legend{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    // reset list style
    margin: 0;
    padding: 0;
    list-style: none;

    li{
        position: relative;
        margin: 1.5rem 0.75rem 0 0.75rem;
        padding-left: 3.5rem;

        // square
        &:before{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 3rem;
            height: 1.5rem;
            background: $grey--dark;
            border-radius: 0.75rem;
        }
    }

    // colors
    li:nth-of-type(1){
        color: $chart-color1;
        &:before{
            background: $chart-color1;
        }
    }
    li:nth-of-type(2){
        color: $chart-color2;
        &:before{
            background: $chart-color2;
        }
    }
    li:nth-of-type(3){
        color: $chart-color3;
        &:before{
            background: $chart-color3;
        }
    }
    li:nth-of-type(4){
        color: $chart-color4;
        &:before{
            background: $chart-color4;
        }
    }
    li:nth-of-type(5){
        color: $chart-color5;
        &:before{
            background: $chart-color5;
        }
    }
    li:nth-of-type(6){
        color: $chart-color6;
        &:before{
            background: $chart-color6;
        }
    }
    li:nth-of-type(7){
        color: $chart-color7;
        &:before{
            background: $chart-color7;
        }
    }
    li:nth-of-type(8){
        color: $chart-color8;
        &:before{
            background: $chart-color8;
        }
    }
    li:nth-of-type(9){
        color: $chart-color9;
        &:before{
            background: $chart-color9;
        }
    }
    li:nth-of-type(10){
        color: $chart-color10;
        &:before{
            background: $chart-color10;
        }
    }

    span{
        display: block;
        @include transition; // for 'inactive' class
    }
}



// PIE
.pie{
    margin-top: 1.5rem;
    background: darken($grey--light, 5%);
}

.pie__upper{
    display: flex;
    align-items: center;
    padding: 1.5rem;
    background: $grey--light;
}

.pie__chart{
    position: relative; // for .pie__tooltip
}
.pie__peity{
    // is hidden & replaced by .peity
}
.peity{

    @include desktop{

        path{
            cursor: pointer;
            @include transition(opacity);
        }
    }
}

.pie__tooltips{

    @include mobile{
        display: none;
    }
    @include desktop{
        pointer-events: none;
        font-size: 0.875rem;
        font-weight: 700;
        color: white;

        // reset list style
        margin: 0;
        padding: 0;
        list-style: none;

        li{
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            transform: translateY(-50%);
            text-align: center;

            // hide
            opacity: 0;
            @include transition(opacity);
        }
    }
}

.pie__values{
    flex: 1;
    // reset list style
    margin: 0;
    padding: 0;
    list-style: none;

    margin-left: $gutter;
}

.pie__value{
    position: relative;
    height: 1.5rem;
    font-size: 0.875rem;
    color: white;
    background: white;

    span{
        position: absolute;
        left: 100%;
        top: 50%;
        transform: translate3d(0, -50%, 0);
        margin-left: 0.5rem;
        font-weight: 700;
    }

    @include desktop{

        span{
            @include transition; // for 'inactive' class
        }
    }
}
// colors (+ peity paths in js)
.pie__value:nth-of-type(1){
    color: $chart-color1;
    background: $chart-color1;
}
.pie__value:nth-of-type(2){
    color: $chart-color2;
    background: $chart-color2;
}
.pie__value:nth-of-type(3){
    color: $chart-color3;
    background: $chart-color3;
}
.pie__value:nth-of-type(4){
    color: $chart-color4;
    background: $chart-color4;
}
.pie__value:nth-of-type(5){
    color: $chart-color5;
    background: $chart-color5;
}
.pie__value:nth-of-type(6){
    color: $chart-color6;
    background: $chart-color6;
}
.pie__value:nth-of-type(7){
    color: $chart-color7;
    background: $chart-color7;
}
.pie__value:nth-of-type(8){
    color: $chart-color8;
    background: $chart-color8;
}
.pie__value:nth-of-type(9){
    color: $chart-color9;
    background: $chart-color9;
}
.pie__value:nth-of-type(10){
    color: $chart-color10;
    background: $chart-color10;
}

.pie__title{
    margin: 0;
    padding: 1.5rem;
    font-family: $font-family--heading;
    font-weight: 700;
    text-align: center;
}



// HOVER ACTION
@include desktop{

    .hover-action{
        cursor: pointer;
        @include transition;
    }
    .hover-action.inactive{
        opacity: 0.33;
    }

    // pies
    .peity path.inactive{
        opacity: 0.33;
    }
    .pie__value.inactive span{
        transform: translate3d(-0.75rem, -50%, 0);
        opacity: 0;
    }
    .pies__legend li.inactive span{
        transform: translate3d(-0.75rem, 0, 0);
        opacity: 0;
    }

    // legend
    .legend li.inactive span{
        transform: translate3d(-0.75rem, 0, 0);
        opacity: 0;
    }
}