// * Helpers -------------------------- * //

// Right arrow down //
.m-right-arrow (@color: #000000, @size: 8px, @right: 0) {
    position: relative;

    &:after {
        content      : "";
        position     : absolute;
        top          : 50%;
        right        : @right;
        width        : 0;
        height       : 0;
        margin       : (-@size / 2) 0 0;
        border-top   : @size solid @color;
        border-right : @size solid transparent;
        border-left  : @size solid transparent;
    }
}

// Left arrow down //
.m-left-arrow (@color: #000000, @size: 8px, @right: 0) {
    position: relative;

    &:after {
        content       : "";
        position      : absolute;
        top           : 50%;
        left          : @right;
        width         : 0;
        height        : 0;
        margin        : (-@size / 2) 0 0;
        border-top    : @size solid transparent;
        border-right  : @size solid @color;
        border-bottom : @size solid transparent;
    }
}

// Gradient //
.m-gradient (@top_color, @bottom_color, @start: 0%, @stop: 100%, @position: to bottom) {
    background-image  : linear-gradient(@position, @top_color @start, @bottom_color @stop);
    background-repeat : no-repeat;
}

// Tab //
.m-tab () {
    float           : left;
    padding         : 10px 0;
    text-align      : center;
    text-decoration : none;
}

// Fixes the font flickering issue during animations in Safari //
.m-webkit-smooth-animation-font (@stroke, @color) {
     -webkit-font-smoothing : antialiased;
        -webkit-text-stroke : @stroke @color;
}

// Fixes the font flickering issue during animations in Firefox //
.m-moz-smooth-animation-font () {
    -moz-osx-font-smoothing : grayscale;
}

// * Text features -------------------- //
.m-ellipsis () {
    white-space   : nowrap;
    text-overflow : ellipsis;
    overflow      : hidden;
}

.m-hide-text () {
    text-indent : 100%;
    white-space : nowrap;
    overflow    : hidden;
}

// * Legacy --------------------------- //

// Border helper //
.m-border (@widths, @colors, @styles: solid) {
    border-width : @widths;
    border-color : @colors;
    border-style : @styles;
}

// Border image //
.m-border-image (@url, @iwidth, @bwidth) {
    border-image         : @url @iwidth repeat;
    border-width         : @bwidth;
    background-clip      : padding-box;
    border-style         : solid;
}

// A fixed-size element which shows a background image and hides all content //
.m-image (@url: none) {
    overflow            : hidden;
    background-image    : @url;
    background-repeat   : no-repeat;
    background-position : center center;
    text-align          : left;
    text-indent         : -9999px;
}

// Double border box //
// FIXME: This can be refactored into outline+border //
.m-double-border-box () {
    border  : solid 1px rgba(0, 0, 0, .2);
    outline : none;

    > *:not(form) {
        border           : solid 1px #333333;
        background-color : #ffffff;
    }

    &:after { outline: none; }
}