.pillow-meter {
    @backgroundColor: #ffffff;

    overflow: visible;

    &:after {
        border           : 0;
        border-radius    : 0;
        background-color : @backgroundColor;
    }

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

    .pillow-gauge-notch { background: none; }

    .pillow-gauge-max-label { right: 0; }

    .svg-notch {
        fill   : #000000;
        stroke : none;
    }

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

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

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

        .pillow-gauge-notch {
            transform-origin : center (@notchHeight + 5);
            top              : (@width / 2) - (@notchHeight + 5);
            left             : @width * 0.47;
        }

        .pillow-gauge-max-label {
            top       : calc((@width / 2) + 3px);
            width     : 26px;
            font-size : 10px;
        }

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

    // Gauge
    @width       : 120px;
    @bowWidth    : 30px;
    @notchHeight : 65px;
    @gapWidth    : 43px;

    .set-sizes();
}