/* Copyright (C) 2016 NooBaa */

pie-chart {
    @baseAngle: pi() * .75rad;
    display: block;
    width: 168px;
    height: 168px;
    stroke-width: 6px;

    svg {
        display: block;
        fill: transparent;
        width: inherit;
        height: inherit;
        pointer-events: visibleStroke;

        > .content-wrapper {
            transform: translate(50%, 50%);
        }

        .outline,
        .outer-seg,
        .inner-seg {
            vector-effect: non-scaling-stroke;
        }

        .outline, .outer-seg {
            transform:
                rotate(@baseAngle)
                scale(74);
        }

        .outline {
            stroke: rgba(var(--color17), .1);
            r: 1px;
        }

        .outer-seg {
            cursor: default;

            &:hover {
                stroke-width: 9px;

                + .inner-seg {
                    display: block;
                }
            }
        }

        .inner-seg {
            display: none;
            stroke-width: 2px;
            transform:
                rotate(@baseAngle)
                scale(67) ;
        }


        .pri-text {
            display: none;
            text-anchor: middle;
            font-size: @font-size5;
            font-weight:@font-thin;
            stroke: rgb(var(--color17));
            stroke-width: 1px;
        }

        .sec-text {
            display: none;
            text-anchor: middle;
            transform: translateY(@font-size5 - 4);
            font-size: @font-size2;
            font-weight: @font-thin;
            stroke: rgb(var(--color11));
            stroke-width: 1px;
        }

        .outer-seg:hover,
        .segments:not(:hover) {
            ~ .pri-text,
            ~ .sec-text {
                display: block;
            }
        }
    }

    &.pc-non-interactive,
    &.disabeld {
        svg {
            pointer-events: none;
        }
    }

    &.disabled {
        opacity: .5;
    }

    &.pc-hide-values {
        .outer-seg:hover,
        .segments:not(:hover) {
            ~ .pri-text,
            ~ .sec-text {
                display: none;
            }
        }
    }


}
