// Grid system
//
// Generate semantic grid columns with these mixins.

@grid-columns : 12;
//** Padding between columns. Gets divided in half for the left and right.
@grid-gutter-width : 30px;
// Navbar collapse
//** Point at which the navbar becomes uncollapsed.
@grid-float-breakpoint : @screen-sm-min;
//** Point at which the navbar begins collapsing.
@grid-float-breakpoint-max : (@grid-float-breakpoint - 1);

// Centered container element
.container-fixed(@gutter: @grid-gutter-width) {
  margin-right  : auto;
  margin-left   : auto;
  padding-left  : floor((@gutter / 2));
  padding-right : ceil((@gutter / 2));
  &:extend(.clearfix all);
  }

// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  margin-left  : ceil((@gutter / -2));
  margin-right : floor((@gutter / -2));
  &:extend(.clearfix all);
  }

// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
  position      : relative;
  float         : left;
  width         : percentage((@columns / @grid-columns));
  min-height    : 1px;
  padding-left  : (@gutter / 2);
  padding-right : (@gutter / 2);
  }

.make-xs-column-offset(@columns) {
  margin-left : percentage((@columns / @grid-columns));
  }

.make-xs-column-push(@columns) {
  left : percentage((@columns / @grid-columns));
  }

.make-xs-column-pull(@columns) {
  right : percentage((@columns / @grid-columns));
  }

// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position      : relative;
  min-height    : 1px;
  padding-left  : (@gutter / 2);
  padding-right : (@gutter / 2);

  @media (min-width : @screen-sm-min) {
    float : left;
    width : percentage((@columns / @grid-columns));
    }
  }

.make-sm-column-offset(@columns) {
  @media (min-width : @screen-sm-min) {
    margin-left : percentage((@columns / @grid-columns));
    }
  }

.make-sm-column-push(@columns) {
  @media (min-width : @screen-sm-min) {
    left : percentage((@columns / @grid-columns));
    }
  }

.make-sm-column-pull(@columns) {
  @media (min-width : @screen-sm-min) {
    right : percentage((@columns / @grid-columns));
    }
  }

// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
  position      : relative;
  min-height    : 1px;
  padding-left  : (@gutter / 2);
  padding-right : (@gutter / 2);

  @media (min-width : @screen-md-min) {
    float : left;
    width : percentage((@columns / @grid-columns));
    }
  }

.make-md-column-offset(@columns) {
  @media (min-width : @screen-md-min) {
    margin-left : percentage((@columns / @grid-columns));
    }
  }

.make-md-column-push(@columns) {
  @media (min-width : @screen-md-min) {
    left : percentage((@columns / @grid-columns));
    }
  }

.make-md-column-pull(@columns) {
  @media (min-width : @screen-md-min) {
    right : percentage((@columns / @grid-columns));
    }
  }

// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
  position      : relative;
  min-height    : 1px;
  padding-left  : (@gutter / 2);
  padding-right : (@gutter / 2);

  @media (min-width : @screen-lg-min) {
    float : left;
    width : percentage((@columns / @grid-columns));
    }
  }

.make-lg-column-offset(@columns) {
  @media (min-width : @screen-lg-min) {
    margin-left : percentage((@columns / @grid-columns));
    }
  }

.make-lg-column-push(@columns) {
  @media (min-width : @screen-lg-min) {
    left : percentage((@columns / @grid-columns));
    }
  }

.make-lg-column-pull(@columns) {
  @media (min-width : @screen-lg-min) {
    right : percentage((@columns / @grid-columns));
    }
  }

// Responsive utilities

//
// More easily include all the states for responsive-utilities.less.
.responsive-visibility() {
  display : block !important;
  table& {
    display : table;
    }
  tr& {
    display : table-row !important;
    }
  th&,
  td& {
    display : table-cell !important;
    }
  }

.responsive-invisibility() {
  display : none !important;
  }

//
// Mixins: vendor prefixes
// --------------------------------------------------

// Box sizing
.box-sizing(@box-model) {
  -webkit-box-sizing : @box-model; // Safari <= 5
  -moz-box-sizing    : @box-model; // Firefox <= 19
  box-sizing         : @box-model;
  }

.border-radius(@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;
  background-clip                    : padding-box;
  }

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

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

.rounded(@radius: 2px) {
  -webkit-border-radius : @radius;
  -moz-border-radius    : @radius;
  -o-border-radius      : @radius;
  border-radius         : @radius;
  }

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

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

.animation-delay (@animation-delay) {
  -webkit-animation-delay : @animation-delay;
  -moz-animation-delay    : @animation-delay;
  -ms-animation-delay     : @animation-delay;
  -o-animation-delay      : @animation-delay;
  animation-delay         : @animation-delay;

  }

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

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

// Transformations
.rotate(@degrees) {
  -webkit-transform : rotate(@degrees);
  -moz-transform    : rotate(@degrees);
  -ms-transform     : rotate(@degrees);
  -o-transform      : rotate(@degrees);
  transform         : rotate(@degrees);
  }

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

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

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

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

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

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

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

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

// Backface visibility
//
// Prevent browsers from flickering when using CSS 3D transforms.
// Default value is `visible`, but can be changed to `hidden
// See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
.backface-visibility(@visibility) {
  -webkit-backface-visibility : @visibility;
  -moz-backface-visibility    : @visibility;
  backface-visibility         : @visibility;
  }

// User select
//
// For selecting text on the page
.user-select(@select) {
  -webkit-user-select : @select;
  -moz-user-select    : @select;
  -ms-user-select     : @select;
  -o-user-select      : @select;
  user-select         : @select;
  }

// Opacity

.opacity(@opacity: 0.5) {
  -moz-opacity    : @opacity;
  -khtml-opacity  : @opacity;
  -webkit-opacity : @opacity;
  opacity         : @opacity;
  @opperc : @opacity * 100;
  -ms-filter      : ~"progid:DXImageTransform.Microsoft.Alpha(opacity=@{opperc})";
  filter          : ~"alpha(opacity=@{opperc})";
  }

// Placeholder text
.placeholder(@color: @input-color-placeholder) {
  &:-moz-placeholder {
    color : @color;
    }
  // Firefox 4-18
  &::-moz-placeholder {
    color : @color;
    }
  // Firefox 19+
  &:-ms-input-placeholder {
    color : @color;
    }
  // Internet Explorer 10+
  &::-webkit-input-placeholder {
    color : @color;
    }
  // Safari and Chrome
  }

// Resize anything
.resizable(@direction) {
  resize   : @direction; // Options: horizontal, vertical, both
  overflow : auto; // Safari fix
  }

// CSS3 Content Columns
.content-columns(@width, @count, @gap) {
  -webkit-column-width : @width;
  -moz-column-width    : @width;
  column-width         : @width;
  -webkit-column-count : @count;
  -moz-column-count    : @count;
  column-count         : @count;
  -webkit-column-gap   : @gap;
  -moz-column-gap      : @gap;
  column-gap           : @gap;
  }

// Optional hyphenation
.hyphens(@mode: auto) {
  word-wrap       : break-word;
  -webkit-hyphens : @mode;
  -moz-hyphens    : @mode;
  -ms-hyphens     : @mode;
  -o-hyphens      : @mode;
  hyphens         : @mode;
  }

// Gradients
#gradient {
  .horizontal(@startColor: #555555, @endColor: #333333) {
    background-color  : @endColor;
    background-image  : -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
    background-image  : -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
    background-image  : -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
    background-image  : -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
    background-image  : linear-gradient(to right, @startColor, @endColor); // Standard, IE10
    background-repeat : repeat-x;
    filter            : e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)", argb(@startColor), argb(@endColor))); // IE9 and down
    }
  .vertical(@startColor: #555555, @endColor: #333333) {
    background-color  : @endColor;
    background-image  : -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
    background-image  : -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
    background-image  : -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
    background-image  : -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
    background-image  : linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10
    background-repeat : repeat-x;
    filter            : e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)", argb(@startColor), argb(@endColor))); // IE9 and down
    }
  .directional(@startColor: #555555, @endColor: #333333, @deg: 45deg) {
    background-color  : @endColor;
    background-repeat : repeat-x;
    background-image  : -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
    background-image  : -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
    background-image  : -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
    background-image  : linear-gradient(@deg, @startColor, @endColor); // Standard, IE10
    }
  .horizontal-three-colors(@startColor: #00B3EE, @midColor: #7A43B6, @colorStop: 50%, @endColor: #C3325F) {
    background-color  : mix(@midColor, @endColor, 80%);
    background-image  : -webkit-gradient(left, linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
    background-image  : -webkit-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
    background-image  : -moz-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
    background-image  : -o-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
    background-image  : linear-gradient(to right, @startColor, @midColor @colorStop, @endColor);
    background-repeat : no-repeat;
    filter            : e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)", argb(@startColor), argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback
    }
  .vertical-three-colors(@startColor: #00B3EE, @midColor: #7A43B6, @colorStop: 50%, @endColor: #C3325F) {
    background-color  : mix(@midColor, @endColor, 80%);
    background-image  : -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
    background-image  : -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
    background-image  : -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor);
    background-image  : -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
    background-image  : linear-gradient(@startColor, @midColor @colorStop, @endColor);
    background-repeat : no-repeat;
    filter            : e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)", argb(@startColor), argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback
    }
  .radial(@innerColor: #555555, @outerColor: #333333) {
    background-color  : @outerColor;
    background-image  : -webkit-gradient(radial, center center, 0, center center, 460, from(@innerColor), to(@outerColor));
    background-image  : -webkit-radial-gradient(circle, @innerColor, @outerColor);
    background-image  : -moz-radial-gradient(circle, @innerColor, @outerColor);
    background-image  : -o-radial-gradient(circle, @innerColor, @outerColor);
    background-repeat : no-repeat;
    }
  .striped(@color: #555555, @angle: 45deg) {
    background-color : @color;
    background-image : -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)), color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent), to(transparent));
    background-image : -webkit-linear-gradient(@angle, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-image : -moz-linear-gradient(@angle, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-image : -o-linear-gradient(@angle, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-image : linear-gradient(@angle, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    }
  .vertical-width(@startColor: #555555, @endColor: #333333, @startwidth: 50%, @endwidth: 50%) {
    background        : @startColor;
    background        : -moz-linear-gradient(top, @startColor @startwidth, @endColor @endwidth); // FF 3.6+
    background        : -webkit-linear-gradient(top, @startColor @startwidth, @endColor @endwidth);

    background        : -o-linear-gradient(top, @startColor @startwidth, @endColor @endwidth); // Opera 11.10
    background        : linear-gradient(to bottom, @startColor @startwidth, @endColor @endwidth); // Standard, IE10
    background-repeat : repeat-x;
    filter            : e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)", argb(@startColor), argb(@endColor))); // IE9 and down
    }
  }

// Reset filters for IE
//
// Useful for when you want to remove a gradient from an element.
.reset-filter() {
  filter : e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
  }

//
// Mixins: utilities
// --------------------------------------------------

// Clearfix
//
// Source: http://nicolasgallagher.com/micro-clearfix-hack/
//
// For modern browsers
// 1. The space content is one way to avoid an Opera bug when the
//    contenteditable attribute is included anywhere else in the document.
//    Otherwise it causes space to appear at the top and bottom of elements
//    that are clearfixed.
// 2. The use of `table` rather than `block` is only necessary if using
//    `:before` to contain the top-margins of child elements.
.clearfix() {
  &:before,
  &:after {
    content : " "; // 1
    display : table; // 2
    }
  &:after {
    clear : both;
    }
  }

// Center-align a block level element
.center-block() {
  display      : block;
  margin-left  : auto;
  margin-right : auto;
  }

// Sizing shortcuts
.size(@width, @height) {
  width  : @width;
  height : @height;
  }

.square(@size) {
  .size(@size, @size);
  }

// Text overflow
//
// Requires inline-block or block for proper styling

.text-truncate() {
  overflow      : hidden;
  text-overflow : ellipsis;
  white-space   : nowrap;
  }

// Retina images
//
// Retina background-image support with non-retina fall back

.retina-image(@file-1x, @file-2x) {
  background-image : url("@{file-1x}");

  @media only screen and (-webkit-min-device-pixel-ratio : 2), only screen and ( min--moz-device-pixel-ratio : 2), only screen and ( -o-min-device-pixel-ratio : 2/1), only screen and ( min-device-pixel-ratio : 2), only screen and ( min-resolution : 192dpi), only screen and ( min-resolution : 2dppx) {
    background-image : url("@{file-2x}");
    }
  }

// How to use if-has-background-image(@custom-background-image);
// .mixin (@a; @b: 0) when (isnumber(@b)) { ... }
// .mixin (@a; @b: 0) when (isurl(@b)) { ... }
//.if-has-background-image (@condition) when not (@condition = '') {
//  background-image  : url("@{custom-background-image}");
//  background-size   : cover;
//  background-repeat : no-repeat;
//  background-attachment: fixed;
//  }
.if-has-background-image (@condition) when (isurl(@condition)) {
  //background-image      : url("@{custom-background-image}");
  background-image      : ~"@{custom-background-image}";
  background-size       : cover;
  background-repeat     : no-repeat;
  background-attachment : fixed;
  }

//.if-has-background-color (@condition) when not (@condition = '') {
//  background-color : ~"@{custom-background-color}";
//  }
.if-has-background-color (@condition) when (iscolor(@condition)) {
  background-color : ~"@{custom-background-color}";
  }


