// main: ../main.less
.text-shadow (@string: 0 1px 3px rgba(0, 0, 0, 0.25)) {
    text-shadow: @string;
}

.box-shadow (@string) {
    -webkit-box-shadow: @string;
    -moz-box-shadow: @string;
    box-shadow: @string;
}

.drop-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {
    -webkit-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha);
    -moz-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha);
    box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha);
}

.inner-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {
    -webkit-box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
    -moz-box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
    box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
}

.box-sizing (@type: border-box) {
    -webkit-box-sizing: @type;
    -moz-box-sizing: @type;
    box-sizing: @type;
}

.border-radius (@radius: 5px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;

    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}

.border-radiuses (@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) {
    -webkit-border-top-right-radius: @topright;
    -webkit-border-bottom-right-radius: @bottomright;
    -webkit-border-bottom-left-radius: @bottomleft;
    -webkit-border-top-left-radius: @topleft;

    -moz-border-radius-topright: @topright;
    -moz-border-radius-bottomright: @bottomright;
    -moz-border-radius-bottomleft: @bottomleft;
    -moz-border-radius-topleft: @topleft;

    border-top-right-radius: @topright;
    border-bottom-right-radius: @bottomright;
    border-bottom-left-radius: @bottomleft;
    border-top-left-radius: @topleft;

    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}

.opacity (@opacity: 0.5) {
    -webkit-opacity: @opacity;
    -moz-opacity: @opacity;
    opacity: @opacity;
}

.gradient (@startColor: #eee, @endColor: white) {
    background-color: @startColor;
    background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
    background: -webkit-linear-gradient(top, @startColor, @endColor);
    background: -moz-linear-gradient(top, @startColor, @endColor);
    background: -ms-linear-gradient(top, @startColor, @endColor);
    background: -o-linear-gradient(top, @startColor, @endColor);
}

.horizontal-gradient (@startColor: #eee, @endColor: white) {
    background-color: @startColor;
    background-image: -webkit-gradient(linear, left top, right top, from(@startColor), to(@endColor));
    background-image: -webkit-linear-gradient(left, @startColor, @endColor);
    background-image: -moz-linear-gradient(left, @startColor, @endColor);
    background-image: -ms-linear-gradient(left, @startColor, @endColor);
    background-image: -o-linear-gradient(left, @startColor, @endColor);
}

.animation (@name, @duration: 300ms, @delay: 0, @ease: ease) {
    -webkit-animation: @name @duration @delay @ease;
    -moz-animation: @name @duration @delay @ease;
    -ms-animation: @name @duration @delay @ease;
}

.transition (@transition) {
    -webkit-transition: @transition;
    -moz-transition: @transition;
    -ms-transition: @transition;
    -o-transition: @transition;
}

.transform(@string) {
    -webkit-transform: @string;
    -moz-transform: @string;
    -ms-transform: @string;
    -o-transform: @string;
}

.scale (@factor) {
    -webkit-transform: scale(@factor);
    -moz-transform: scale(@factor);
    -ms-transform: scale(@factor);
    -o-transform: scale(@factor);
}

.rotate (@deg) {
    -webkit-transform: rotate(@deg);
    -moz-transform: rotate(@deg);
    -ms-transform: rotate(@deg);
    -o-transform: rotate(@deg);
}

.skew (@deg, @deg2) {
    -webkit-transform: skew(@deg, @deg2);
    -moz-transform: skew(@deg, @deg2);
    -ms-transform: skew(@deg, @deg2);
    -o-transform: skew(@deg, @deg2);
}

.translate (@x, @y: 0) {
    -webkit-transform: translate(@x, @y);
    -moz-transform: translate(@x, @y);
    -ms-transform: translate(@x, @y);
    -o-transform: translate(@x, @y);
}

.translate3d (@x, @y: 0, @z: 0) {
    -webkit-transform: translate3d(@x, @y, @z);
    -moz-transform: translate3d(@x, @y, @z);
    -ms-transform: translate3d(@x, @y, @z);
    -o-transform: translate3d(@x, @y, @z);
}

.perspective (@value: 1000) {
    -webkit-perspective: @value;
    -moz-perspective: @value;
    -ms-perspective: @value;
    perspective: @value;
}

.transform-origin (@x: center, @y: center) {
    -webkit-transform-origin: @x @y;
    -moz-transform-origin: @x @y;
    -ms-transform-origin: @x @y;
    -o-transform-origin: @x @y;
}


//flexbox mixins
.flexbox() {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

}

.flex-justify(@justifyStyle) {
    .ms-flex-justify(@justifyStyle);
    -webkit-justify-content: @justifyStyle;
    justify-content: @justifyStyle;
}

.flexbox-direction(@direction) {
    -ms-flex-direction: @direction;
    -webkit-flex-direction: @direction;
    flex-direction: @direction;
}


.flex-align-items(@alignStyle) {
    -ms-flex-align: @alignStyle;
    -webkit-align-items: @alignStyle;
    align-items: @alignStyle;
}

.flex-align-self(@selfAlignStyle) {
    .ms-flex-align-self(@selfAlignStyle);
    -webkit-align-self: @selfAlignStyle;
    align-self: @selfAlignStyle;
}





.flexbox-order(@order) {
    -webkit-box-ordinal-group: @order;
    -moz-box-ordinal-group: @order;
    -ms-flex-order: @order;
    -webkit-order: @order;
    order: @order;
}


.flex-wrap(@wrap) {
    -ms-flex-wrap: @wrap;
    -webkit-flex-wrap: @wrap;
    flex-wrap: @wrap;
}

// /* These are the conditional mixins for the different syntax for IE10 Flexbox*/
.ms-flex-justify(@msJustify) when (@msJustify =space-between) {
    -ms-flex-pack: justify;
}

.ms-flex-justify(@msJustify) when (@msJustify =space-around) {
    -ms-flex-pack: distribute;
}

.ms-flex-justify(@msJustify) when (@msJustify =flex-end) {
    -ms-flex-pack: end;
}

.ms-flex-justify(@msJustify) when (@msJustify =flex-start) {
    -ms-flex-pack: start;
}

.ms-flex-justify(@msJustify) when (@msJustify =center) {
    -ms-flex-pack: center;
}

.ms-flex-align-self(@msSelfAlign) when (@msSelfAlign =flex-end) {
    -ms-flex-item-align: end;
}

.ms-flex-align-self(@msSelfAlign) when (@msSelfAlign =flex-start) {
    -ms-flex-item-align: start;
}

.ms-flex-align-self(@msSelfAlign) when (@msSelfAlign =auto),
(@msSelfAlign =center),
(@msSelfAlign =baseline),
(@msSelfAlign =stretch) {
    -ms-flex-item-align: @msSelfAlign;
}

//flexbox mixins

/*
xs, extra-small: 0px or larger
sm, small: 600px or larger
md, medium: 960px or larger
lg, large: 1280px or larger
xl, extra-large: 1920px or larger
*/
//== Media Query - Min Desktop Mode
@minimal-desktop: ~"(min-width: 993px) and (max-width: 1400px)";
//== Media Query - Min Desktop And Below Mode
@minimal-desktop-and-below :~"(max-width:1280px)";
@minimal-desktop-and-above :~"(min-width:1280px)";
//== Media Query - Desktop Mode
@desktop: ~"(min-width: 960px) ";
//== Media Query - Desktop & Tablet Modes
@desktop-and-tablet: ~"(min-width: 769px)";
//== Media Query - Tablet Mode
@tablet: ~"(min-width: 769px) and (max-width:992px)";
//== Media Query - Tablet & Mobile Modes
@tablet-and-mobile: ~"(max-width: 960px)";
//== Media Query - Mobile Mode
@mobile: ~"(max-width: 768px)";
//== IE8-11 versions hack
@hack-ie8-11: ~"screen\0 ";