.pillow-gauge {
    // Default colors
    @railColor            : #eeeeee;
    @gaugeColor           : #b0d87c;
    @shadowColor          : #777777;
    @notchColor           : #000000;
    @backgroundColor      : #ffffff;
    @shadowWidth          : 5px;

    position : relative;
    display  : inline-block;

    .pillow-gauge-rail, .pillow-gauge-gauge, .pillow-gauge-shadow, .pillow-gauge-notch, &:after {
        box-sizing : border-box;
        position   : absolute;
        top        : 0;
        left       : 0;
    }

    .pillow-gauge-rail, .pillow-gauge-gauge, .pillow-gauge-shadow, &:after {
        border-radius : 50%;
        border-style  : solid;
    }

    &:after {
        top          : -1px;
        left         : -1px;
        content      : " ";
        display      : block;
        border-color : transparent transparent @backgroundColor transparent;
    }

    .pillow-gauge-rail {
        transform: rotate(-180deg);

        &.third { border-color : transparent @railColor transparent transparent; }
        &.half  { border-color : transparent @railColor @railColor transparent; }
        &.full  { border-color : transparent @railColor @railColor @railColor; }
    }

    .pillow-gauge-gauge {
        transform: rotate(-270deg);
        .set-gauge-border-color(@gaugeColor);
    }

    .pillow-gauge-shadow {
        transform: rotate(-270deg);
        .set-gauge-border-color(@shadowColor);
    }

    .pillow-gauge-notch {
        transform: rotate(-135deg);

        background-color : @notchColor;
        z-index          : 3;
    }

    .pillow-gauge-caption {
        box-sizing  : border-box;
        position    : absolute;
        top         : 0;
        left        : 0;
        right       : 0;
        bottom      : 0;
        display     : block;
        z-index     : auto;
        margin      : auto;
        font-family : @main-font;
        text-align  : center;

        .value, .unit { display: inline-block; }
        .label {
            width          : 105px;
            margin         : 0 auto;
            font-family    : @main-font-medium;
            font-size      : 10px;
            text-transform : uppercase;
            cursor         : default;

            span {
                display : block;
                height  : 20px;
            }
        }
    }

    .pillow-gauge-max-label {
        position   : absolute;
        z-index    : 1;
        text-align : center;
        color      : rgba(170, 170, 170, .8);
    }

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

    @customColorOrange     : #f8cd9c;
    @customColorLightBlue  : #86cbca;
    @customColorDarkBlue   : #5898bd;
    @customColorGrey       : #cccccc;
    @customColorPurple     : #6666cc;
    @customColorPink       : #ff3d7e;
    @customColorViolet     : #9f38ce;
    @customColorRed        : #e94853;
    @customColorEggBlue    : #07cacc;
    @customColorBlackGreen : #96b06f;

    .custom-color(@customGaugeColor) {
        .pillow-gauge-gauge {
            .set-gauge-border-color(@customGaugeColor);
            .set-gauge-border-color-after(@customGaugeColor);
        }
    }

    .custom-notch-color(@customNotchColor) {
        .pillow-gauge-notch { background-color: @customNotchColor; }
    }

    .custom-shadow-color(@customShadowColor) {
        .pillow-gauge-shadow {
            .set-gauge-border-color(@customShadowColor);
        }
    }

    .set-gauge-border-color(@color) {
        &.third { border-color : transparent @color transparent transparent; }
        &.half  { border-color : @color @color transparent transparent; }
        &.full  { border-color : @color @color transparent @color; }
    }

    // only used on ff
    .set-gauge-border-color-after(@color) {
        &.third:after { border-color : transparent @color transparent transparent; }
        &.half:after  { border-color : @color @color transparent transparent; }
        &.full:after  { border-color : @color @color transparent @color; }
    }

    &.orange     { .custom-color(@customColorOrange); }
    &.light-blue { .custom-color(@customColorLightBlue); }
    &.dark-blue  { .custom-color(@customColorDarkBlue); }
    &.grey       { .custom-color(@customColorGrey); }
    &.purple     { .custom-color(@customColorPurple); }
    &.violet     { .custom-color(@customColorViolet); }
    &.pink       { .custom-color(@customColorPink); }
    &.red        { .custom-color(@customColorRed); }
    &.egg-blue   { .custom-color(@customColorEggBlue); }

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

    &.shadow-pink { .custom-shadow-color(@customColorPink); }

    &.black-background {
        @railColor    : rgba(255, 255, 255, .1);

        &:after { border-color: transparent transparent #000010 transparent; }
        .pillow-gauge-notch { background-color: #ffffff; }

        .pillow-gauge-rail {
            &.third { border-color : transparent @railColor transparent transparent; }
            &.half  { border-color : transparent @railColor @railColor transparent; }
            &.full  { border-color : transparent @railColor @railColor @railColor; }
        }

        .pillow-gauge-caption {
            .value, .unit { color: #ffffff; }
            .label { color: rgba(255, 255, 255, .8); }
        }

        &.green { .custom-color(@customColorBlackGreen); }
    }

    /* Not available state ------------ */

    &.gauge-not-available {
        .pillow-gauge-notch,
        .pillow-gauge-gauge,
        .pillow-gauge-max-label { display: none; }

        .pillow-gauge-caption {
            .value { color: @railColor; }
            .unit { display: none; }
        }
    }

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

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

        &:after {
            width        : @width + 2;
            height       : @width + 2;
            border-width : @gapWidth;
        }

        .pillow-gauge-rail, .pillow-gauge-gauge {
            height       : @width;
            width        : @width;
            border-width : @bowWidth;
        }

        .pillow-gauge-shadow {
            height       : @shadowSize;
            width        : @shadowSize;
            border-width : @shadowWidth;
            top          : @shadowOffset;
            left         : @shadowOffset;
        }

        .pillow-gauge-notch {
            transform-origin : center (@width / 2);
            height           : @notchHeight;
            width            : @notchWidth;
            left             : @width * 0.49;
        }

        .pillow-gauge-caption {
            height: @width * 0.36;

            .value { font-size: @fontSize * 0.72; }
            .unit  { font-size: @fontSize * 0.48; margin-left: 3px; }
            .label { font-size: @fontSize * 0.26; }
        }

        .pillow-gauge-max-label {
            width     : 26px;
            font-size : 10px;
        }
    }

    // Due to many different variations we're naming different sizes with actual dimensions
    &.gauge-w240-h240 {
        // Gauge
        @width        : 240px;
        @bowWidth     : 27px;
        @gapWidth     : 49px;

        // Notch
        @notchHeight  : 30px;
        @notchWidth   : 5px;

        // Shadow
        @shadowSize   : 160px;
        @shadowOffset : 40px;

        // Caption
        @fontSize     : 42px;

        .set-sizes();

        .pillow-gauge-max-label {
            bottom    : 28px;
            right     : 49px;
            font-size : 12px;
        }
    }

    &.gauge-w220-h220 {
        // Gauge
        @width        : 220px;
        @bowWidth     : 23px;
        @gapWidth     : 43px;

        // Notch
        @notchHeight  : 30px;
        @notchWidth   : 5px;

        // Shadow
        @shadowSize   : 160px;
        @shadowOffset : 30px;

        // Caption
        @fontSize     : 34px;

        .set-sizes();

        .pillow-gauge-max-label {
            bottom : 23px;
            right  : 41px;
        }
    }

    &.gauge-w200-h200,
    &.normal-size {
        // Gauge
        @width        : 200px;
        @bowWidth     : 23px;
        @gapWidth     : 43px;

        // Notch
        @notchHeight  : 30px;
        @notchWidth   : 5px;

        // Shadow
        @shadowSize   : 140px;
        @shadowOffset : 30px;

        // Caption
        @fontSize     : 38px;

        .set-sizes();

        .pillow-gauge-max-label {
            bottom : 23px;
            right  : 41px;
        }
    }

    &.gauge-w190-h190 {
        // Gauge
        @width        : 190px;
        @bowWidth     : 23px;
        @gapWidth     : 43px;

        // Notch
        @notchHeight  : 30px;
        @notchWidth   : 5px;

        // Shadow
        @shadowSize   : 130px;
        @shadowOffset : 30px;

        // Caption
        @fontSize     : 42px;

        .set-sizes();

        .pillow-gauge-max-label {
            bottom    : 21px;
            right     : 39px;
            font-size : 12px;
        }
    }

    &.gauge-w160-h160 {
        // Gauge
        @width        : 160px;
        @bowWidth     : 16px;
        @gapWidth     : 35px;

        // Notch
        @notchHeight  : 23px;
        @notchWidth   : 4px;

        // Shadow
        @shadowSize   : 116px;
        @shadowOffset : 22px;

        // Caption
        @fontSize     : 37px;

        .set-sizes();

        .pillow-gauge-max-label {
            bottom : 16px;
            right  : 32px;
        }
    }

    &.gauge-w150-h150,
    &.small-size {
        // Gauge
        @width        : 150px;
        @bowWidth     : 14px;
        @gapWidth     : 33px;

        // Notch
        @notchHeight  : 20px;
        @notchWidth   : 4px;

        // Shadow
        @shadowSize   : 110.5px;
        @shadowOffset : 20px;

        // Caption
        @fontSize     : 34px;

        .set-sizes();

        .pillow-gauge-caption {
            top: -20px;

            .label {
                font-size: 10px;

                // .tooltip:after { left: 110px; }
            }

        }

        .pillow-gauge-max-label {
            bottom : 13px;
            right  : 28px;
        }
    }

    &.gauge-w92-h92,
    &.smaller-size {
        // Gauge
        @width        : 92px;
        @bowWidth     : 14px;
        @gapWidth     : 23px;

        // Notch
        @notchHeight  : 18px;
        @notchWidth   : 3px;

        // Shadow
        @shadowSize   : 110.5px;
        @shadowOffset : 20px;

        // Caption
        @fontSize     : 18px;

        .set-sizes();

        .pillow-gauge-caption {
            top : 10px;

            .unit  { font-size: 11px; }
            .label { display: none; }
            .value { letter-spacing: -1px; }
        }

        .pillow-gauge-max-label { display: none; }
        .pillow-gauge-shadow    { display: none; }
    }

    &.gauge-w140-h140 {
        // Gauge
        @width        : 140px;
        @bowWidth     : 16px;
        @gapWidth     : 33px;

        // Notch
        @notchHeight  : 23px;
        @notchWidth   : 4px;

        // Shadow
        @shadowSize   : 100px;
        @shadowOffset : 20px;

        // Caption
        @fontSize     : 29px;

        .set-sizes();

        .pillow-gauge-caption {
            .label {
                font-size: @fontSize * 0.35;
            }
        }

        .pillow-gauge-max-label {
            bottom : 13px;
            right  : 28px;
        }
    }

    &.gauge-w60-h60 {
        // Gauge
        @width        : 60px;
        @bowWidth     : 3px;
        @gapWidth     : 5px;

        // Notch
        @notchHeight  : 0;
        @notchWidth   : 0;

        // Shadow
        @shadowSize   : 110.5px;
        @shadowOffset : 20px;

        // Caption
        @fontSize     : 25px;

        .set-sizes();

        .pillow-gauge-caption {
            margin-top: 13px;

            .label { display: none; }
        }

        // too small to render
        .pillow-gauge-notch     { display: none; }
        .pillow-gauge-shadow    { display: none; }
        .pillow-gauge-max-label { display: none; }
    }

    @-moz-document url-prefix() {
        // adds an additional gauge to fix white gaps in ff
        .pillow-gauge {
            .pillow-gauge-gauge {
                .set-gauge-border-color-after(@gaugeColor);

                &:after {
                    box-sizing    : border-box;
                    content       : "";
                    position      : absolute;
                    top           : 0;
                    left          : 0;
                    border-radius : 50%;
                    border-style  : solid;
                    transform     : rotate(0.5deg);
                }
            }

            &:after { left: -2px; }

            .set-sizes() {
                &:after { width: @width + 3; }

                // only used on ff
                .pillow-gauge-gauge:after {
                    width        : @width;
                    height       : @width;
                    border-width : @bowWidth;
                    top          : -@bowWidth;
                    left         : -@bowWidth;
                }
            }

            &.gauge-w240-h240 {
                @width    : 240px;
                @bowWidth : 27px;
                .set-sizes();
            }

            &.gauge-w220-h220 {
                @width    : 220px;
                @bowWidth : 23px;
                .set-sizes();
            }

            &.gauge-w200-h200,
            &.normal-size {
                @width    : 200px;
                @bowWidth : 23px;
                .set-sizes();
            }

            &.gauge-w190-h190 {
                @width    : 190px;
                @bowWidth : 23px;
                .set-sizes();
            }

            &.gauge-w160-h160 {
                @width    : 160px;
                @bowWidth : 16px;
                .set-sizes();
            }

            &.gauge-w150-h150,
            &.small-size {
                @width    : 150px;
                @bowWidth : 14px;
                .set-sizes();
            }

            &.gauge-w92-h92,
            &.smaller-size {
                @width    : 92px;
                @bowWidth : 14px;
                .set-sizes();
            }

            &.gauge-w140-h140 {
                @width    : 140px;
                @bowWidth : 16px;
                .set-sizes();
            }

            &.gauge-w60-h60 {
                @width    : 60px;
                @bowWidth : 3px;
                .set-sizes();
            }
        }
    }
}