/*
  Cross Browser function
*/
@mixin cross-browser($attr, $value, $onValue: false) {
  @if ($onValue == false) {
    #{$attr}: $value;
    -webkit-#{$attr}: $value;
    -moz-osx-#{$attr}: $value;
    -moz-#{$attr}: $value;
    -ms-#{$attr}: $value;
  } @else {
    #{$attr}: $value;
    #{$attr}: -webkit-#{$value};
    #{$attr}: -moz-osx-#{$value};
    #{$attr}: -moz-#{$value};
    #{$attr}: -ms-#{$value};
  }
}

@mixin transform($value) {
  -webkit-transform: $value;
  -moz-transform: $value;
  transform: $value;
}

@mixin font($size: 1rem, $weight: regular) {
  font-size: $size;
  font-weight: map-get($font-weight, $weight);
}

@mixin mobile() {
  @media (max-width: 768px) {
    @content;
  }

  @media (max-device-width: 768px) {
    @content;
  }
}

@mixin tablet() {
  @media (max-width: 980px) {
    @content;
  }

  @media (max-device-width: 980px) {
    @content;
  }
}

@mixin desktop() {
  @media (min-width: 1024px) {
    @content;
  }
}

@mixin safariOnly($version: 'all') {
  @if $version == 'all' {
    @media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {
      @content;
    }
  } @else {
    @media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) {
      @content;
    }
  }
}

@mixin gradient($color1, $color2, $position1: 0%, $position2: 100%, $orientation: 'vertical') {
  $orientationOne: top;
  $orientationTwo: bottom;
  $gradientType: 0;

  @if ($orientation == 'vertical') {
    $orientationOne: top;
    $orientationTwo: bottom;
    $gradientType: 0;
  } @else if ($orientation == 'horizontal') {
    $orientationOne: left;
    $orientationTwo: right;
    $gradientType: 1;
  } @else if ($orientation == 'diagonal-bottom') {
    $orientationOne: -45deg;
    $orientationTwo: 135deg;
    $gradientType: 1;
  } @else if ($orientation == 'radial') {
    $orientationOne: center, ellipse cover;
    $orientationTwo: 45deg;
    $gradientType: 1;
  }

  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000222+0,000222+100&0+0,1+100 */
  background: -moz-linear-gradient($orientationOne, $color1 $position1, $color2 $position2); /* FF3.6-15 */
  background: -webkit-linear-gradient($orientationOne, $color1 $position1,$color2 $position2); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to $orientationTwo, $color1 $position1,$color2 $position2); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$color1}', endColorstr='#{$color2}',GradientType=$gradientType ); /* IE6-9 */
}

@mixin firefoxOnly {
  @supports (-moz-appearance: meterbar)  {
    @content;
  }
}

@mixin truncate($lines: 1) {
  @if $lines == 1 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  } @else {
    overflow: hidden;
    display: -webkit-box !important;

    @include cross-browser(line-clamp, #{$lines});
    @include cross-browser(box-orient, vertical);
    /* autoprefixer: ignore next */
    -webkit-box-orient: vertical;
  }
}