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

@mixin smooth() {
  -webkit-font-smoothing: antialiased;
}

@mixin clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
    // Fixes Opera/contenteditable bug:
    // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
    line-height: 0;
  }
  &:after {
    clear: both;
  }
}

@mixin size($height, $width) {
  width: $width;
  height: $height;
}

@mixin square($size) {
  @include size($size, $size);
}

@mixin placeholder($color: $placeholderColor) {
  &:-moz-placeholder {
    color: $color;
  }
  &:-ms-input-placeholder {
    color: $color;
  }
  &::-webkit-input-placeholder {
    color: $color;
  }
}

@mixin hide-text {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

@mixin input-block-level {
  display: block;
  width: 100%;
  min-height: $inputHeight; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
  @include box-sizing(border-box); // Makes inputs behave like true block-level elements
}

@mixin box-sizing($boxmodel) {
  -webkit-box-sizing: $boxmodel;
     -moz-box-sizing: $boxmodel;
          box-sizing: $boxmodel;
}

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

@mixin ie7-inline-block() {
  *display: inline; /* IE7 inline-block hack */
  *zoom: 1;
}

/* Border Radius
------------------------------------------------- */

// all

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
          border-radius: $radius;
}

// corner

@mixin border-top-left-radius($radius) {
  -webkit-border-top-left-radius: $radius;
      -moz-border-radius-topleft: $radius;
          border-top-left-radius: $radius;
}

@mixin border-top-right-radius($radius) {
  -webkit-border-top-right-radius: $radius;
      -moz-border-radius-topright: $radius;
          border-top-right-radius: $radius;
}

@mixin border-bottom-right-radius($radius) {
  -webkit-border-bottom-right-radius: $radius;
      -moz-border-radius-bottomright: $radius;
          border-bottom-right-radius: $radius;
}

@mixin border-bottom-left-radius($radius) {
  -webkit-border-bottom-left-radius: $radius;
      -moz-border-radius-bottomleft: $radius;
          border-bottom-left-radius: $radius;
}

// side 

@mixin border-top-radius($radius) {
  @include border-top-right-radius($radius);
  @include border-top-left-radius($radius);
}

@mixin border-right-radius($radius) {
  @include border-top-right-radius($radius);
  @include border-bottom-right-radius($radius);
}

@mixin border-bottom-radius($radius) {
  @include border-bottom-right-radius($radius);
  @include border-bottom-left-radius($radius);
}

@mixin border-left-radius($radius) {
  @include border-top-left-radius($radius);
  @include border-bottom-left-radius($radius);
}

/* Transition
------------------------------------------------- */

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

/* Transformation
------------------------------------------------- */

@mixin rotate($degrees) {
  -webkit-transform: rotate($degrees);
     -moz-transform: rotate($degrees);
      -ms-transform: rotate($degrees);
       -o-transform: rotate($degrees);
          transform: rotate($degrees);
}

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

@mixin 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);
}

@mixin 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
}

/* Opacity
------------------------------------------------- */

@mixin opacity($opacity) {
  opacity: $opacity / 100;
  filter: alpha(opacity=$opacity);
}

/* Background Clipping
------------------------------------------------- */

@mixin background-clip($clip) {
  -webkit-background-clip: $clip;
     -moz-background-clip: $clip;
          background-clip: $clip;
}

/* Grid
------------------------------------------------- */

@mixin container-fixed() {
  margin-right: auto;
  margin-left: auto;
  @include clearfix();
}

@mixin makeRow() {
  margin-left: $gridGutterWidth * -1;
  @include clearfix();
}

@mixin makeColumn($columns: 1, $offset: 0) {
  float: left;
  margin-left: ($gridColumnWidth * $offset) + ($gridGutterWidth * ($offset - 1)) + ($gridGutterWidth * 2);
  width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
}

@mixin grid-core($gridColumnWidth, $gridGutterWidth) {
  .row {
    margin-left: $gridGutterWidth * -1;
    @include clearfix();
  }

  [class*="span"] {
    float: left;
    min-height: 1px; // prevent collapsing columns
    margin-left: $gridGutterWidth;
  }

  // Set the container width, and override it for fixed navbars in media queries
  .container,
  .navbar-static-top .container,
  .navbar-fixed-top .container,
  .navbar-fixed-bottom .container {
    @include grid-core-span($gridColumns, $gridColumnWidth, $gridGutterWidth);
  }

  // generate .spanX and .offsetX
  @include grid-core-span-x($gridColumns, $gridColumnWidth, $gridGutterWidth);
  @include grid-core-offset-x($gridColumns, $gridColumnWidth, $gridGutterWidth);
}

@mixin grid-core-span-x($gridColumns, $gridColumnWidth, $gridGutterWidth) {
  @while $gridColumns > 0 {
    .span#{$gridColumns} { @include grid-core-span($gridColumns, $gridColumnWidth, $gridGutterWidth)}
    $gridColumns: $gridColumns - 1;
  }
}

@mixin grid-core-offset-x($gridColumns, $gridColumnWidth, $gridGutterWidth) {
  @while $gridColumns > 0 {
    .offset#{$gridColumns} { @include grid-core-offset($gridColumns, $gridColumnWidth, $gridGutterWidth); }
    $gridColumns: $gridColumns - 1;
  }
}

@mixin grid-core-span($columns, $gridColumnWidth, $gridGutterWidth) {
  width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
}

@mixin grid-core-offset($columns, $gridColumnWidth, $gridGutterWidth) {
  margin-left: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns + 1));
}


/* Fluid Grid
------------------------------------------------- */

@mixin grid-fluid($fluidGridColumnWidth, $fluidGridGutterWidth) {
  .row-fluid {
    width: 100%;
    @include clearfix();
    [class*="span"] {
      @include input-block-level();
      float: left;
      margin-left: $fluidGridGutterWidth;
      *margin-left: $fluidGridGutterWidth - (.5 / $gridRowWidth * 100px * 1%);
    }
    [class*="span"]:first-child {
      margin-left: 0;
    }

    // Space grid-sized controls properly if multiple per line
    .controls-row [class*="span"] + [class*="span"] {
      margin-left: $fluidGridGutterWidth;
    }

    // generate .spanX and .offsetX
    @include grid-fluid-span-x($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth);
    @include grid-fluid-offset-x($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth);
  }
}

@mixin grid-fluid-span-x($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
  @while $gridColumns > 0 {
    .span#{$gridColumns} { @include grid-fluid-span($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth); }
    $gridColumns: $gridColumns - 1;
  }
}

@mixin grid-fluid-offset-x($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
  @while $gridColumns > 0 {
    .offset#{$gridColumns} { @include grid-fluid-offset($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth); }
    .offset#{$gridColumns}:first-child { @include grid-fluid-offset-first-child($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth); }
    $gridColumns: $gridColumns - 1;
  }
}

@mixin grid-fluid-span($columns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
  width: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1));
  *width: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) - (.5 / $gridRowWidth * 100px * 1%);
}

@mixin grid-fluid-offset($columns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
  margin-left: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) + ($fluidGridGutterWidth * 2);
  *margin-left: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) - (.5 / $gridRowWidth * 100px * 1%) + ($fluidGridGutterWidth * 2) - (.5 / $gridRowWidth * 100px * 1%);
}

@mixin grid-fluid-offset-first-child($columns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
  margin-left: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) + ($fluidGridGutterWidth);
  *margin-left: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) - (.5 / $gridRowWidth * 100px * 1%) + $fluidGridGutterWidth - (.5 / $gridRowWidth * 100px * 1%);
}

@mixin grid-input($gridColumnWidth, $gridGutterWidth) {
  input,
  textarea,
  .uneditable-input {
    margin-left: 0; // override margin-left from core grid system
  }

  // Space grid-sized controls properly if multiple per line
  .controls-row [class*="span"] + [class*="span"] {
    margin-left: $gridGutterWidth;
  }

  // generate .spanX
  @include grid-input-span-x($gridColumns, $gridColumnWidth, $gridGutterWidth);
}

@mixin grid-input-span-x($gridColumns, $gridColumnWidth, $gridGutterWidth) {
  @while $gridColumns > 0 {
    input.span#{$gridColumns},
    textarea.span#{$gridColumns},
    .uneditable-input.span#{$gridColumns} {
      @include grid-input-span($gridColumns, $gridColumnWidth, $gridGutterWidth);
    }
    $gridColumns: $gridColumns - 1;
  }
}

@mixin grid-input-span($columns, $gridColumnWidth, $gridGutterWidth) {
  width: (($gridColumnWidth) * $columns) + ($gridGutterWidth * ($columns - 1)) - 14;
}