//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;

  &.btn {
    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);
}

// Flexbox

@mixin flexbox-display {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
}

@mixin flex($value: 1) {
  -webkit-flex: $value;
  -moz-flex: $value;
  -ms-flex: $value;
  flex: $value;
}