.pillow-stopwatch {
    @backgroundColor               : #ffffff;

    @aboveAverageCircleColor       : #b0da7a;
    @aboveAverageInnerCircleColor1 : #bddf92;
    @aboveAverageInnerCircleColor2 : #cbe5ab;
    @aboveAverageInnerCircleColor3 : #daebc5;
    @aboveAverageInnerCircleColor4 : #e8f1dd;
    @aboveAverageInnerCircleColor5 : #e8f1dd;

    @belowAverageCircleColor       : #e94853;
    @belowAverageInnerCircleColor1 : #eb6a73;
    @belowAverageInnerCircleColor2 : #ee8d93;
    @belowAverageInnerCircleColor3 : #f1b0b5;
    @belowAverageInnerCircleColor4 : #f4d3d5;
    @belowAverageInnerCircleColor5 : #f4d3d5;

    @aboveAveragePieColor          : #f3f9ec;
    @aboveAverageInnerPieColor1    : #f3f8ed;
    @aboveAverageInnerPieColor2    : #f4f7ef;
    @aboveAverageInnerPieColor3    : #f5f8f2;
    @aboveAverageInnerPieColor4    : #f6f7f4;
    @aboveAverageInnerPieColor5    : #f6f7f4;

    @belowAveragePieColor          : #fce4e5;
    @belowAverageInnerPieColor1    : #fae7e8;
    @belowAverageInnerPieColor2    : #f9ebeb;
    @belowAverageInnerPieColor3    : #f9eff0;
    @belowAverageInnerPieColor4    : #f8f3f3;
    @belowAverageInnerPieColor5    : #f8f3f3;

    @customCircleColorOrange       : #f8cd9c;
    @customPieColorOrange          : #fef5eb;

    @customCircleColorPurple       : @anl-consolidated-color;
    @customPieColorPurple          : #f9f9ff;

    @customCircleColorViolet       : #9f38ce;
    @customPieColorViolet          : #f3e9ff;

    @customCircleColorLightBlue    : #86cbca;
    @customPieColorLightBlue       : #edf7f7;

    @customCircleColorDarkBlue     : #5898bd;
    @customPieColorDarkBlue        : #e6f0f5;

    @customCircleColorGrey         : #cccccc;
    @customPieColorGrey            : #f7f7f7;

    @customNotchColorPink          : #ff3d7e;

    @circleBackgroundColor         : #eeeeee;

    @offset                        : 15px;

    position : relative;
    display  : inline-block;

    .set-border-color-based-on-average(@aboveAverageCircleColor, @belowAverageCircleColor) {
        &.pillow-stopwatch-quarter {
            &.pillow-stopwatch-above-average { border-color : @aboveAverageCircleColor transparent transparent transparent; }
            &.pillow-stopwatch-below-average { border-color : @belowAverageCircleColor transparent transparent transparent; }
        }

        &.pillow-stopwatch-half {
            &.pillow-stopwatch-above-average { border-color : @aboveAverageCircleColor @aboveAverageCircleColor transparent transparent; }
            &.pillow-stopwatch-below-average { border-color : @belowAverageCircleColor @belowAverageCircleColor transparent transparent; }
        }

        &.pillow-stopwatch-three-quarters {
            &.pillow-stopwatch-above-average { border-color : @aboveAverageCircleColor @aboveAverageCircleColor @aboveAverageCircleColor transparent; }
            &.pillow-stopwatch-below-average { border-color : @belowAverageCircleColor @belowAverageCircleColor @belowAverageCircleColor transparent; }
        }

        &.pillow-stopwatch-full {
            &.pillow-stopwatch-above-average { border-color : @aboveAverageCircleColor @aboveAverageCircleColor @aboveAverageCircleColor @aboveAverageCircleColor; }
            &.pillow-stopwatch-below-average { border-color : @belowAverageCircleColor @belowAverageCircleColor @belowAverageCircleColor @belowAverageCircleColor; }
        }
    }

    .set-border-color(@color) {
        &.pillow-stopwatch-quarter         { border-color : @color transparent transparent transparent; }
        &.pillow-stopwatch-half            { border-color : @color @color transparent transparent; }
        &.pillow-stopwatch-three-quarters  { border-color : @color @color @color transparent; }
        &.pillow-stopwatch-full            { border-color : @color @color @color @color; }
    }

    .set-inner-clocks-styles(@stopwatchSize, @offset, @minute, @aboveAverageCircleColor, @belowAverageCircleColor, @aboveAveragePieColor, @belowAveragePieColor) {
        @topOffset      : 18px;
        @size           : @stopwatchSize - @minute * @offset * 2;
        @positionOffset : @minute * @offset;

        .pillow-stopwatch-circle {
            width  : @size + 2px;
            height : @size + 2px;
            left   : @positionOffset - 1px;
            top    : @topOffset + @positionOffset - 1px;
        }

        .pillow-stopwatch-circle-colored {
            width  : @size;
            height : @size;
            left   : @positionOffset;
            top    : @topOffset + @positionOffset;

            .set-border-color-based-on-average(@aboveAverageCircleColor, @belowAverageCircleColor);
        }

        .pillow-stopwatch-pie {
            @borderWidth : 9px;

            width        : @size - 2 * @borderWidth - 2px;
            height       : @size - 2 * @borderWidth - 2px;
            left         : @positionOffset + @borderWidth + 1px;
            top          : @topOffset + @positionOffset + @borderWidth + 1px;
            border-width : (@size - 2 * @borderWidth - 2px) / 2;
        }

        .pillow-stopwatch-circle-background { .set-border-color(@backgroundColor); }
        .pillow-stopwatch-pie-colored       { .set-border-color-based-on-average(@aboveAveragePieColor, @belowAveragePieColor); }
        .pillow-stopwatch-pie-cutter        { .set-border-color(@backgroundColor); }
    }

    .pillow-stopwatch-circle,
    .pillow-stopwatch-circle-colored,
    .pillow-stopwatch-pie,
    .pillow-stopwatch-time-text,
    .pillow-stopwatch-title-text { box-sizing: border-box; }

    .pillow-stopwatch-circle,
    .pillow-stopwatch-circle-colored,
    .pillow-stopwatch-pie {
        border-style : solid;
    }

    .pillow-stopwatch-btn {
        position         : absolute;
        background-color : @circleBackgroundColor;

        &.pillow-stopwatch-btn-left  { transform: rotate(-43deg); }
        &.pillow-stopwatch-btn-right { transform: rotate(43deg); }
    }

    .pillow-stopwatch-circle {
        position      : absolute;
        border-radius : 50%;
        transform     : rotate(45.0000000001deg); // Safari rendering fix

        &.pillow-stopwatch-circle-background {
            .set-border-color(@circleBackgroundColor);
        }

        &.pillow-stopwatch-circle-colored {
            .set-border-color-based-on-average(@aboveAverageCircleColor, @belowAverageCircleColor);
        }
    }

    .pillow-stopwatch-pie {
        position      : absolute;
        border-radius : 100%;
        transform     : rotate(45deg);
        box-sizing    : border-box;

        &.pillow-stopwatch-pie-colored {
            .set-border-color-based-on-average(@aboveAveragePieColor, @belowAveragePieColor);
        }

        &.pillow-stopwatch-pie-cutter {
            .set-border-color(@backgroundColor);
        }
    }

    .pillow-stopwatch-notch {
        position         : absolute;
        background-color : #000000;
    }

    .pillow-stopwatch-little-notch {
        position         : absolute;
        background-color : #cccccc;
        opacity          : 0.8;
        background-color : rgba(0, 0, 0, 0.15);
    }

    .pillow-stopwatch-text {
        position    : absolute;
        font-family : @main-font-medium;
        text-align  : center;
        color       : #000000;
        cursor      : default;

        span { height: 20px; }

        .pillow-stopwatch-subtitle-text {
            font-size : 12px;
            display   : none;
        }
    }

    /* Dimensions --------------------- */

    .set-sizes() {
        width  : @size;
        height : @size + @topOffset;

        .pillow-stopwatch-circle {
            width        : @size;
            height       : @size;
            left         : 0;
            top          : @topOffset;
            border-width : @borderWidth;
        }

        .pillow-stopwatch-circle-colored {
            width        : @size - 2px;
            height       : @size - 2px;
            left         : 1px;
            top          : @topOffset + 1px;
            border-width : @borderWidth - 2px;
        }

        .pillow-stopwatch-pie {
            width        : @size - @borderWidth * 2;
            height       : @size - @borderWidth * 2;
            left         : @borderWidth;
            top          : @topOffset + @borderWidth;
            border-width : (@size - @borderWidth * 2) / 2;
        }

        .pillow-stopwatch-time-text {
            width     : @size;
            top       : @timeOffset;
            font-size : @timeFontSize;
        }

        .pillow-stopwatch-title-text {
            width     : 74px;
            top       : @titleOffset;
            left      : calc(~"50% - 36px");
            font-size : @titleFontSize;
        }

        .pillow-stopwatch-inner-clocks {
            border-width: 10px;
            .pillow-stopwatch-clock-for-minute-1 {
                .set-inner-clocks-styles(@size, @offset, 1, @aboveAverageInnerCircleColor1, @belowAverageInnerCircleColor1, @aboveAverageInnerPieColor1, @belowAverageInnerPieColor1);
            }

            .pillow-stopwatch-clock-for-minute-2 {
                .set-inner-clocks-styles(@size, @offset, 2, @aboveAverageInnerCircleColor2, @belowAverageInnerCircleColor2, @aboveAverageInnerPieColor2, @belowAverageInnerPieColor2);
            }

            .pillow-stopwatch-clock-for-minute-3 {
                .set-inner-clocks-styles(@size, @offset, 3, @aboveAverageInnerCircleColor3, @belowAverageInnerCircleColor3, @aboveAverageInnerPieColor3, @belowAverageInnerPieColor3);
            }

            .pillow-stopwatch-clock-for-minute-4 {
                .set-inner-clocks-styles(@size, @offset, 4, @aboveAverageInnerCircleColor4, @belowAverageInnerCircleColor4, @aboveAverageInnerPieColor4, @belowAverageInnerPieColor4);
            }

            .pillow-stopwatch-clock-for-minute-5 {
                .set-inner-clocks-styles(@size, @offset, 5, @aboveAverageInnerCircleColor5, @belowAverageInnerCircleColor5, @aboveAverageInnerPieColor5, @belowAverageInnerPieColor5);
            }
        }


        /* Colors ------------------------- */

        .custom-color(@circleColor, @pieColor) {
            .pillow-stopwatch-circle {
                &.pillow-stopwatch-circle-colored {
                    .set-border-color-based-on-average(@circleColor, @circleColor);
                }
            }

            .pillow-stopwatch-pie {
                &.pillow-stopwatch-pie-colored {
                    .set-border-color-based-on-average(@pieColor, @pieColor);
                }
            }

            .pillow-stopwatch-inner-clocks {
                border-width: 10px;
                .pillow-stopwatch-clock-for-minute-1 {
                    .set-inner-clocks-styles(@size, @offset, 1, lighten(@circleColor, 4%), lighten(@circleColor, 4%), lighten(@pieColor, 0.75%), lighten(@pieColor, 0.75%));
                }
                .pillow-stopwatch-clock-for-minute-2 {
                    .set-inner-clocks-styles(@size, @offset, 2, lighten(@circleColor, 8%), lighten(@circleColor, 8%), lighten(@pieColor, 1.5%), lighten(@pieColor, 1.5%));
                }
                .pillow-stopwatch-clock-for-minute-3 {
                    .set-inner-clocks-styles(@size, @offset, 3, lighten(@circleColor, 11%), lighten(@circleColor, 11%), lighten(@pieColor, 2.25%), lighten(@pieColor, 2.25%));
                }
                .pillow-stopwatch-clock-for-minute-4 {
                    .set-inner-clocks-styles(@size, @offset, 4, lighten(@circleColor, 14%), lighten(@circleColor, 14%), lighten(@pieColor, 2.5%), lighten(@pieColor, 2.5%));
                }
                .pillow-stopwatch-clock-for-minute-5 {
                    .set-inner-clocks-styles(@size, @offset, 5, lighten(@circleColor, 14%), lighten(@circleColor, 14%), lighten(@pieColor, 2.5%), lighten(@pieColor, 2.5%));
                }
            }
        }

        .custom-notch-color(@notchColor) {
            .pillow-stopwatch-notch { background-color: @notchColor; }
        }

        &.orange     { .custom-color(@customCircleColorOrange, @customPieColorOrange); }
        &.light-blue { .custom-color(@customCircleColorLightBlue, @customPieColorLightBlue); }
        &.dark-blue  { .custom-color(@customCircleColorDarkBlue, @customPieColorDarkBlue); }
        &.grey       { .custom-color(@customCircleColorGrey, @customPieColorGrey); }
        &.purple     { .custom-color(@customCircleColorPurple, @customPieColorPurple); }
        &.violet     { .custom-color(@customCircleColorViolet, @customPieColorViolet); }

        &.notch-pink { .custom-notch-color(@customNotchColorPink); }

    }

    &.stopwatch-w200-h200,
    &.size-big {
        @size          : 200px;
        @topOffset     : 18px;
        @borderWidth   : 11px;

        @timeFontSize  : 38px;
        @timeOffset    : 91px;
        @titleFontSize : 10px;
        @titleOffset   : 140px;

        .set-sizes();

        .pillow-stopwatch-btn-left, .pillow-stopwatch-btn-right {
            width  : 30px;
            height : 15px;
        }

        .pillow-stopwatch-btn-left {
            left   : 13px;
            top    : 33px;
        }

        .pillow-stopwatch-btn-right {
            left   : 158px;
            top    : 33px;
        }

        .pillow-stopwatch-btn-middle-part-1 {
            width  : 12px;
            height : 7px;
            left   : 94px;
            top    : 12px;
        }

        .pillow-stopwatch-btn-middle-part-2 {
            width  : 45px;
            height : 12px;
            left   : 77px;
            top    : 0;
        }

        .pillow-stopwatch-notch {
            width            : 5px;
            height           : 32px;
            left             : 100px;
            top              : 18px;
            transform-origin : 0 100px;
        }

        .pillow-stopwatch-little-notch {
            width            : 2px;
            height           : 11px;
            left             : 99px;
            top              : 18px;
            transform-origin : 1px 100px;
        }
    }

    &.stopwatch-w160-h160,
    &.size-medium {
        @size          : 160px;
        @topOffset     : 14px;
        @borderWidth   : 9px;

        @timeFontSize  : 30px;
        @timeOffset    : 60px;
        @titleFontSize : 10px;
        @titleOffset   : 95px;

        .set-sizes();

        .pillow-stopwatch-btn-left, .pillow-stopwatch-btn-right {
            width  : 20px;
            height : 10px;
        }

        .pillow-stopwatch-btn-left {
            left   : 11px;
            top    : 29px;
        }

        .pillow-stopwatch-btn-right {
            left   : 130px;
            top    : 30px;
        }

        .pillow-stopwatch-btn-middle-part-1 {
            width  : 8px;
            height : 5px;
            left   : 77px;
            top    : 9px;
        }

        .pillow-stopwatch-btn-middle-part-2 {
            width  : 32px;
            height : 9px;
            left   : 65px;
            top    : 0;
        }

        .pillow-stopwatch-notch {
            width            : 5px;
            height           : 32px;
            left             : 80px;
            top              : 14px;
            transform-origin : 0 80px;
        }

        .pillow-stopwatch-little-notch {
            width            : 2px;
            height           : 11px;
            left             : 80px;
            top              : 14px;
            transform-origin : 1px 80px;
        }

    }

    &.stopwatch-w120-h120,
    &.size-medium {
        @size          : 120px;
        @topOffset     : 10px;
        @borderWidth   : 8px;

        @timeFontSize  : 25px;
        @timeOffset    : 46px;
        @titleFontSize : 10px;
        @titleOffset   : 75px;

        .set-sizes();

        .pillow-stopwatch-btn-left, .pillow-stopwatch-btn-right {
            width  : 16px;
            height : 7px;
        }

        .pillow-stopwatch-btn-left {
            left   : 10px;
            top    : 20px;
        }

        .pillow-stopwatch-btn-right {
            left   : 94px;
            top    : 20px;
        }

        .pillow-stopwatch-btn-middle-part-1 {
            width  : 6px;
            height : 3px;
            left   : 57px;
            top    : 7px;
        }

        .pillow-stopwatch-btn-middle-part-2 {
            width  : 25px;
            height : 7px;
            left   : 48px;
            top    : 0;
        }

        .pillow-stopwatch-pillow-stopwatch-notch,
        .pillow-stopwatch-little-notch,
        .pillow-stopwatch-inner-clocks {
            display : none;
        }
    }

    &.stopwatch-w94-h94,
    &.size-small {
        @size          : 94px;
        @topOffset     : 0;
        @borderWidth   : 1px;

        @timeFontSize  : 17px;
        @timeOffset    : 38px;
        @titleFontSize : 0;
        @titleOffset   : 0;

        .set-sizes();

        .pillow-stopwatch-circle-colored { border-width: 6px; }

        .pillow-stopwatch-notch {
            width            : 2px;
            height           : 12px;
            left             : 46px;
            top              : 1px;
            transform-origin : 1px 47px;
        }

        .pillow-stopwatch-button,
        .pillow-stopwatch-little-notch,
        .pillow-stopwatch-inner-clocks {
            display: none;
        }
    }
}