//Mixins

//Hyphens mixin
@mixin hyphens($mode: auto) {
  word-wrap: break-word;
  -webkit-hyphens: $mode;
  -moz-hyphens: $mode;
  -ms-hyphens: $mode; // IE10+
  -o-hyphens: $mode;
  hyphens: $mode;
}

//Mixins to define the visibility media queries support
@mixin responsive-invisibility {
  display: none !important;

  tr, th, td {
    display: none !important;
  }
}

@mixin responsive-visibility {
  display: block !important;

  &.button {
    display: inline-block !important;
  }

  tr {
    display: table-row !important;
  }

  th, td {
    display: table-cell !important;
  }
}


// Mixin to set the touch callout actions for different vendors
@mixin touch-callout($value: none) {
  -webkit-touch-callout: $value;
  -webkit-user-select: $value;
  -khtml-user-select: $value;
  -moz-user-select: moz-#{$value};
  -ms-user-select: $value;
  user-select: $value;
}

// Mixin to add support for retina display on images
@mixin retina-image($image, $width, $height) {
  @media (min--moz-device-pixel-ratio: 1.3),
         (-o-min-device-pixel-ratio: 2.6/2),
         (-webkit-min-device-pixel-ratio: 1.3),
         (min-device-pixel-ratio: 1.3),
         (min-resolution: 1.3dppx) {
    /* on retina, use image that's scaled by 2 */
    background-image: url($image);
    background-size: $width $height;
  }
}

// Mixin that will truncate text
@mixin truncate-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// Mixin to set the abs position of any element
@mixin absPosition($top: auto, $right: auto, $bottom: auto, $left: auto) {
  position: absolute;
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
}

// Hidden text - by Nicolas Gallagher
@mixin hidden-text {
  font: 0/0 a;
  text-shadow: none;
  color: transparent;
}

// Font-size mixin, with IE7 & IE8 support, CSS tricks courtesy
@mixin font-size($size: 1.6, $line: $size * 1.25) {
  font-size: ($size * 10) + px;
  line-height: ($line * 10) + px;
  font-size: $size + rem;
  line-height: $line + rem;
}

// Animation keyframes
@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content
  }
  @-moz-keyframes #{$name} {
    @content
  }
  @-ms-keyframes #{$name} {
    @content
  }
  @-o-keyframes #{$name} {
    @content
  }
  @keyframes #{$name} {
    @content
  }
}

// Animation mixin
@mixin animation($value) {
  -webkit-animation: $value;
  -moz-animation: $value;
  -ms-animation: $value;
  -o-animation: $value;
  animation: $value;
}


// Embossing and letterpress effect
@mixin box-emboss($outerOpacity, $innerOpacity) {
  @include box-shadow(rgba(white, $outerOpacity) 0 1p 0,
                      rgba(black, $innerOpacity) 0 1px 0 inset);
}

//Inline navigation mixin

@mixin inline-list($list-style: none,
                   $list-style-position: inside,
                   $padding: 10px,
                   $left-list-item-margin: 10px) {
  @extend %clearfix;
  margin: 0;
  display: block;
  list-style: $list-style;
  list-style-position: $list-style-position;
  padding: $padding;

  & > li {
    float: left;
    margin-left: $left-list-item-margin;
  }
}

// Long text shadows
// Brought to you by http://codepen.io/awesomephant/pen/mAxHz
@mixin long-shadow($type, $color, $length, $fadeout: true, $skew: false, $direction: right){
  $shadow: '';
  @if $skew == false or $type == text{
    @if $direction == right {
      @for $i from 0 to $length - 1 {
        $shadow: $shadow + $i + 'px ' + $i + 'px 0 ' + $color + ',';
      }
    }
    @if $direction == left {
      @for $i from 0 to $length - 1 {
        $shadow: $shadow + $i * -1 + 'px ' + $i + 'px 0 ' + $color + ',';
       }
      }
     }
        
   @if $fadeout == true{
    @for $i from 1 to $length - 1 {
      @if $type == text or $skew == false{
        @if $direction == right{
          $shadow: $shadow + $i + 'px ' + $i + 'px 0 ' +       rgba($color, 1 - $i / $length) + ',';
        }
        @if $direction == left{
          $shadow: $shadow + $i * -1 + 'px ' + $i + 'px 0 ' +       rgba($color, 1 - $i / $length) + ',';
        }
      }
      @if ($type == box) and $skew == true{
        @if $direction == right {
          $shadow: $shadow + $i + 'px ' + $i + 'px 0 ' + $i * .2 + 'px ' + rgba($color, 1 - $i / $length) + ',';
        }
        @if $direction == left {
          $shadow: $shadow + $i * -1 + 'px ' + $i + 'px 0 ' + $i * .2 + 'px ' + rgba($color, 1 - $i / $length) + ',';
        }
      }
  }
  $shadow: $shadow + $length + 'px ' + $length + 'px 0 ' + rgba($color, 0);
 }
 @if $fadeout == false{
   @if $skew == true and ( $type == box ){
     @for $i from 0 to $length - 1 {
            $shadow: $shadow + $i + 'px ' + $i + 'px 0 ' + $i * .1 + 'px ' + $color + ',';
      }
   }
    $shadow: $shadow + $length + 'px ' + $length + 'px 0 ' + rgba(0,0,0,0);
 }
 $shadow: unquote($shadow);
  @if $type == 'box' {@include box-shadow($shadow);}
  @if $type == 'text' {text-shadow: $shadow;}
}

// Placeholder mixin
@mixin input-placeholder {
    &.placeholder { @content; }
    &:-moz-placeholder { @content; }
    &::-moz-placeholder { @content; }
    &:-ms-input-placeholder { @content; }
    &::-webkit-input-placeholder { @content; } 
}