// this. is. hot
.back-button() {
    html.cssmask & {
        display: inline-block;
        position: relative;
        padding-left: 8px;

        // kill the default button transition, since the transition doesn't work in :before
        .transition(none);
    }
    html.cssmask &:before {
        position: absolute;
        left:   -9px;
        top:    2px;
        height: 23px;
        width:  23px;

        content: " ";

        background-color: @btnBackground;
        background-image: -webkit-gradient(linear, top left, bottom right, from(@btnBackground), to(@btnBackgroundHighlight));
        background-image: -webkit-linear-gradient(-45deg, @btnBackground, @btnBackgroundHighlight);
        background-image:    -moz-linear-gradient(-45deg, @btnBackground, @btnBackgroundHighlight);
        background-image:      -o-linear-gradient(-45deg, @btnBackground, @btnBackgroundHighlight);
        background-image:         linear-gradient(-45deg, @btnBackground, @btnBackgroundHighlight);

        background-repeat: repeat-x;

        border-left:   1px solid lighten(@btnBorder, 5%);
        border-bottom: 1px solid darken(@btnBorder, 5%);
        .border-radius(7px 0 7px 0);

        display: inline-block;
        .rotate-skew(45deg, 3deg, 3deg);

        .box-shadow(inset 1px 0 0 rgba(255,255,255,.2));

        -webkit-mask-image: -webkit-gradient(linear, left bottom, right top, from(#000), color-stop(0.5, #000), color-stop(0.5, transparent), to(transparent));
        -webkit-mask-image: -webkit-linear-gradient(45deg, #000, #000 25%, #000 50%, transparent 50%, transparent);
           -moz-mask-image:    -moz-linear-gradient(45deg, #000, #000 25%, #000 50%, transparent 50%, transparent);
             -o-mask-image:      -o-linear-gradient(45deg, #000, #000 25%, #000 50%, transparent 50%, transparent);
                mask-image:         linear-gradient(45deg, #000, #000 25%, #000 50%, transparent 50%, transparent);

        .background-clip(content);

        // for some reason, this guy doesn't work...
        // .transition(background-position .1s linear);
    }
    html.cssmask &:hover:before {
        background-color: darken(@white, 9%);
        background-position: -10px -10px;
    }
    html.cssmask &:active:before {
        background-color: darken(@white, 10%);
        background-color: darken(@white, 15%) e("\9");
        background-image: none;
        .box-shadow(inset 0 3px 4px rgba(0,0,0,.15));
    }
}

.rotate-skew(@degrees, @x, @y) {
  -webkit-transform: rotate(@degrees) skew(@x, @y);
     -moz-transform: rotate(@degrees) skew(@x, @y);
      -ms-transform: rotate(@degrees) skewX(@x) skewY(@y); // See https://github.com/twitter/bootstrap/issues/4885
       -o-transform: rotate(@degrees) skew(@x, @y);
          transform: rotate(@degrees) skew(@x, @y);
}
