.pillow-pie {
    @size : 200px;

    width    : @size;
    height   : @size;
    position : relative;

    .fill, .slice {
        width               : @size;
        height              : @size;
        position            : absolute;
        box-sizing          : border-box;
        border-radius       : 50%;
        backface-visibility : hidden;
    }

    .fill {
        border-style   : solid;
        border-width   : 0;
        pointer-events : auto;
    }

    .slice {
        clip           : rect(0, @size, @size, @size / 2);
        pointer-events : none;

        .fill { clip: rect(0, @size / 2, @size, 0); }
    }

    .slice .fill { backface-visibility: hidden; }

    .series-0  { background-color: @anl-series-1-color; }
    .series-1  { background-color: @anl-series-2-color; }
    .series-2  { background-color: @anl-series-3-color; }
    .series-3  { background-color: #ffffff; border-color: #cccccc; border-width: 2px; }

    .smooth-edge {
        width          : @size + 2;
        height         : @size + 2;
        position       : absolute;
        left           : -1px;
        top            : -1px;
        box-sizing     : border-box;
        border         : 2px solid #ffffff;
        border-radius  : 50%;
        pointer-events : none;
    }

    /* Colors ------------------------- */
    @blackColor: #222222;

    &.dark-blue-color,
    &.light-blue-color,
    &.orange-color,
    &.purple-color,
    &.black-background {
        .smooth-edge { border-color: @blackColor; }
        .series-3    { background-color: @blackColor; border-color: rgba(221, 221, 221, 0.2); border-width: 2px; }
    }

    &.dark-blue-color {
        .series-0  { background-color: @anl-series-1-color; }
        .series-1  { background-color: #406781; }
        .series-2  { background-color: @blackColor; border-color: #406781; border-width: 2px; border-style: dashed; }
    }

    &.light-blue-color {
        .series-0  { background-color: @anl-series-2-color; }
        .series-1  { background-color: #5a8887; }
        .series-2  { background-color: @blackColor; border-color: #5a8887; border-width: 2px; border-style: dashed; }
    }

    &.orange-color {
        .series-0  { background-color: @anl-series-3-color; }
        .series-1  { background-color: #a38a66; }
        .series-2  { background-color: @blackColor; border-color: #a38a66; border-width: 2px; border-style: dashed; }
    }

    &.purple-color {
        .series-0  { background-color: @anl-consolidated-color; }
        .series-1  { background-color: #3d3b68; }
        .series-2  { background-color: @blackColor; border-color: #3d3b68; border-width: 2px; border-style: dashed; }
    }
}

.pie-chart-not-available {
    position      : relative;
    width         : 194px;
    height        : 194px;
    border-width  : 3px;
    border-color  : #cccccc;
    border-radius : 50%;
    border-style  : solid;

    &:after {
        transform-origin : center center;
        transform        : rotate(135deg);
        content          : "";
        position         : absolute;
        display          : block;
        top              : 95px;
        left             : -26px;
        z-index          : 1;
        width            : 249px;
        height           : 1px;
        background-color : #cccccc;
    }

    &:before {
        box-sizing       : border-box;
        content          : "no data";
        position         : absolute;
        display          : block;
        top              : 73px;
        left             : 5px;
        z-index          : 2;
        width            : 184px;
        height           : 38px;
        padding-right    : 10px;
        background-color : #ffffff;
        color            : #dddddd;
        font-family      : @main-font-ultra-light;
        font-size        : 42px;
        text-align       : center;
        line-height      : 37px;
    }

    &.pie-chart-not-available-w120-h120,
    &.size-medium {
        width        : 120px;
        height       : 120px;
        border-width : 2px;
        position     : relative;

        &:after {
            top   : 62px;
            left  : -16px;
            width : 160px;
        }

        &:before {
            top         : 46px;
            left        : 12px;
            width       : 106px;
            height      : 32px;
            font-size   : 33px;
            line-height : 33px;
        }
    }

    &.pie-chart-not-available-w150-h150 {
        width            : 150px;
        height           : 150px;
        border-width     : 2px;
        background-color : #ffffff;

        &:after {
            top   : 80px;
            left  : -18px;
            width : 185px;
        }

        &:before {
            top       : 58px;
            left      : 29px;
            width     : 100px;
            height    : 38px;
            font-size : 32px;
        }
    }
}

.pillow-pie {
    /* Dimensions --------------------- */
    .setSizes() {
        width  : @size;
        height : @size;

        .fill, .slice {
            width  : @size;
            height : @size;
        }

        .slice {
            clip: rect(0, @size, @size, @size / 2);
            .fill { clip: rect(0, @size / 2, @size, 0); }
        }

        .smooth-edge {
            width  : @size + 2;
            height : @size + 2;
        }
    }

    &.pie-chart-w250-h250,
    &.big-size {
        @size: 250px;

        .setSizes();
    }

    &.pie-chart-w180-h180,
    &.medium-size {
        @size: 180px;

        .setSizes();
    }

    &.pie-chart-w150-h150,

    &.pie-chart-w120-h120,
    &.small-size {
        @size: 120px;

        .setSizes();
    }
}