@import "Variables";

@mixin font-face($family, $path, $weight, $style) {
  @font-face {
    font-family: quote($family);
    src: url('#{$path}.eot');
    src: url('#{$path}.eot?#iefix') format('embedded-opentype'),
    url('#{$path}.woff') format('woff'),
    url('#{$path}.ttf') format('truetype');
    font-weight: $weight;
    font-style: $style;
  }
}

@mixin font-face-all($family, $fontsPath) {
  @include font-face($family, '#{$fontsPath}/#{$family}/#{$family}-Regular', normal, normal);
  @include font-face($family, '#{$fontsPath}/#{$family}/#{$family}-Bold', bold, normal);
  @include font-face($family, '#{$fontsPath}/#{$family}/#{$family}-Italic', normal, italic);
  @include font-face($family, '#{$fontsPath}/#{$family}/#{$family}-BoldItalic', bold, italic);
}

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

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

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

@mixin box-shadow($boxShadow...) {
  -webkit-box-shadow: $boxShadow;
  -moz-box-shadow: $boxShadow;
  box-shadow: $boxShadow;
}

@mixin no-user-select() {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

// alias for no-user-select
@mixin unselectable() {
  @include no-user-select;
}

@mixin ar-max($ar: $landscape-aspect-ratio, $min: 'null', $device: 'screen'){
  @if $min == 'null' {
    @media only #{$device} and (max-aspect-ratio: #{$ar}){@content;}
  } @else {
    @media only #{$device} and (max-aspect-ratio: #{$ar}) and (min-aspect-ratio: #{$min}) {@content;}
  }
}

@mixin ar-min($ar: $landscape-aspect-ratio, $max: 'null', $device: 'screen'){
  @if $max == 'null' {
    @media only #{$device} and (min-aspect-ratio: #{$ar}){@content;}
  } @else {
    @media only #{$device} and (min-aspect-ratio: #{$ar}) and (max-aspect-ratio: #{$max}) {@content;}
  }
}

@mixin max($bp, $min: 'null', $device: 'screen'){
  @if $min == 'null' {
    @media only #{$device} and (max-width: #{$bp}px){@content;}
  } @else {
    @media only #{$device} and (max-width: #{$bp}px) and (min-width: #{$min}px) {@content;}
  }
}

@mixin min($bp, $max: 'null', $device: 'screen'){
  @if $max == 'null' {
    @media only #{$device} and (min-width: #{$bp}px){@content;}
  } @else {
    @media only #{$device} and (min-width: #{$bp}px) and (max-width: #{$max}px) {@content;}
  }
}

@mixin broken-image-fix($background...) {

  img {
    position: relative;
  }

  img:after {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: $background;
    content: '';
    vertical-align: middle;
  }
}

@mixin reset {
  margin: 0;

  @media screen {
    box-sizing: border-box;
  }
}

@mixin main-wrapper {
  @media screen {
    position: absolute;
    top: $main-top;
    bottom: $main-bottom;
    left: 0;
    right: 0;
  }
  @media print {
    position: absolute;
    width: 100%;
    height: 100%;
  }
}

@mixin main-wrapper-inner {
  @media screen {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  @media print {
    position: absolute;
    width: 100%;
    max-height: 100%;
  }
}

@mixin dialog-wrapper {
  box-shadow: 0 5px 15px rgba(0,0,0,.5);
}

@mixin clear {
  &:after {
    content: '';
    display: block;
    clear: both;
  }
}

@mixin nav-button {
  display: inline-block;
  width: $nav-button-width;
  height: $nav-button-height;
  line-height: $nav-button-height;
  cursor: pointer;
  z-index: 2;
  opacity: 0.4;
  position: absolute;
  top: $nav-button-top;

  font-weight: bold;
  font-size: $nav-button-font-size;

  transform: scale(1, 2);
  text-align: center;

  &.active {
    opacity: 0.7;
    &:hover {
      opacity: 1;
    }
  }
  &.prev {
    left: -$nav-button-padding;
    &:before {
      content: '<';
      display: inline-block;
      line-height: $nav-button-height;
    }
  }
  &.next {
    right: -$nav-button-padding;
    &:before {
      content: '>';
      display: inline-block;
      line-height: $nav-button-height;
    }
  }
}

/*********************
Mobile Helper classes
*********************/
@mixin flex-spacer {
  flex: 1 1 100%;
}

/*********************
Breakpoints for Mobile and Desktop
*********************/

@mixin breakpoint($point) {
  @if $point == browser {
    @media (min-device-width: 732px) and (min-device-height: 732px) {
      @content;
    }
  } @else if $point == mobile {
    @media screen and (max-device-width: 731px), screen and (max-device-height: 731px) {
      @content;
    }
  }
}

@mixin landscape {
  @media (orientation: landscape) {
    @content;
  }
}

@mixin portrait {
  @media (orientation: portrait) {
    @content;
  }
}
