/* Typography */

@mixin typo-preferred-font($usePreferred: true) {
  @if $usePreferred {
    font-family: $preferred_font;
  }
}

@mixin typo-display-4($colorContrast: false, $usePreferred: true) {
  @include typo-preferred-font($usePreferred);
  font-size: 112px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;

  @if $colorContrast {
    opacity: 0.54;
  }
}

@mixin typo-display-3($colorContrast: false, $usePreferred: true) {
  @include typo-preferred-font($usePreferred);
  font-size: 56px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.02em;

  @if $colorContrast {
    opacity: 0.54;
  }
}

@mixin typo-display-2($colorContrast: false, $usePreferred: true) {
  @include typo-preferred-font($usePreferred);
  font-size: 45px;
  font-weight: 400;
  line-height: 48px;

  @if $colorContrast {
    opacity: 0.54;
  }
}

@mixin typo-display-1($colorContrast: false, $usePreferred: true) {
  @include typo-preferred-font($usePreferred);
  font-size: 34px;
  font-weight: 400;
  line-height: 40px;

  @if $colorContrast {
    opacity: 0.54;
  }
}

@mixin typo-headline($colorContrast: false, $usePreferred: true) {
  @include typo-preferred-font($usePreferred);
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
  -moz-osx-font-smoothing: grayscale;

  @if $colorContrast {
    opacity: 0.87;
  }
}

@mixin typo-title($colorContrast: false, $usePreferred: true) {
  @include typo-preferred-font($usePreferred);
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;

  @if $colorContrast {
    opacity: 0.87;
  }
}

@mixin typo-subhead($colorContrast: false, $usePreferred: true) {
  @include typo-preferred-font($usePreferred);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.04em;

  @if $colorContrast {
    opacity: 0.87;
  }
}

@mixin typo-subhead-2($colorContrast: false, $usePreferred: true) {
  @include typo-preferred-font($usePreferred);
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 0.04em;

  @if $colorContrast {
    opacity: 0.87;
  }
}

@mixin typo-body-2($colorContrast: false, $usePreferred: false) {
  @include typo-preferred-font($usePreferred);
  font-size: 14px;
  @if $usePreferred {
    font-weight: 500;
  } @else {
    font-weight: bold;
  }
  line-height: 24px;
  letter-spacing: 0;

  @if $colorContrast {
    opacity: 0.87;
  }
}

@mixin typo-body-1($colorContrast: false, $usePreferred: false) {
  @include typo-preferred-font($usePreferred);
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0;

  @if $colorContrast {
    opacity: 0.87;
  }
}

@mixin typo-caption($colorContrast: false, $usePreferred: false) {
  @include typo-preferred-font($usePreferred);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;

  @if $colorContrast {
    opacity: 0.54;
  }
}

@mixin typo-blockquote($colorContrast: false, $usePreferred: true) {
  @include typo-preferred-font($usePreferred);
  position: relative;
  font-size: 24px;
  font-weight: 300;
  font-style: italic;
  line-height: 1.35;
  letter-spacing: 0.08em;

  &:before {
    position: absolute;
    left: -0.5em;
    content: '“';
  }

  &:after {
    content: '”';
    margin-left: -0.05em;
  }

  @if $colorContrast {
    opacity: 0.54;
  }
}

@mixin typo-menu($colorContrast: false, $usePreferred: true) {
  @include typo-preferred-font($usePreferred);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;

  @if $colorContrast {
    opacity: 0.87;
  }
}

@mixin typo-button($colorContrast: false, $usePreferred: true) {
  @include typo-preferred-font($usePreferred);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0;

  @if $colorContrast {
    opacity: 0.87;
  }
}

@mixin typo-icon() {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  word-wrap: normal;
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* Shadows */

// Focus shadow mixin.
@mixin focus-shadow() {
  box-shadow: 0 0 8px rgba(0,0,0,.18),0 8px 16px rgba(0,0,0,.36);
}

@mixin shadow-0dp() {
  box-shadow: none;
}
@mixin shadow-1dp() {
  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity),
              0px 1px 1px 0px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
              0px 1px 3px 0px rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
}
@mixin shadow-2dp() {
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
              0px 2px 2px 0px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
              0px 1px 5px 0px rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
}
@mixin shadow-3dp() {
  box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
              0px 3px 4px 0px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
              0px 1px 8px 0px rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
}
@mixin shadow-4dp() {
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity),
              0px 4px 5px 0px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
              0px 1px 10px 0px rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
}
@mixin shadow-5dp() {
  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity),
              0px 5px 8px 0px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
              0px 1px 14px 0px rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
}
@mixin shadow-6dp() {
  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity),
              0px 6px 10px 0px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
              0px 1px 18px 0px rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
}
@mixin shadow-7dp() {
  box-shadow: 0px 4px 5px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
              0px 7px 10px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
              0px 2px 16px 1px rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
}
@mixin shadow-8dp() {
  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity),
              0px 8px 10px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
              0px 3px 14px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
}
@mixin shadow-9dp() {
  box-shadow: 0px 5px 6px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity),
              0px 9px 12px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
              0px 3px 16px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
}
@mixin shadow-10dp() {
  box-shadow: 0px 6px 6px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity),
              0px 10px 14px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
              0px 4px 18px 3px rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
}
@mixin shadow-11dp() {
  box-shadow: 0px 6px 7px -4px rgba(0, 0, 0, $shadow-key-umbra-opacity),
              0px 11px 15px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
              0px 4px 20px 3px rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
}
@mixin shadow-12dp() {
  box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, $shadow-key-umbra-opacity),
              0px 12px 17px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
              0px 5px 22px 4px rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
}
@mixin shadow-13dp() {
  box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, $shadow-key-umbra-opacity),
              0px 13px 19px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
              0px 5px 24px 4px rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
}
@mixin shadow-14dp() {
  box-shadow: 0px 7px 9px -4px rgba(0, 0, 0, $shadow-key-umbra-opacity),
              0px 14px 21px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
              0px 5px 26px 4px rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
}
@mixin shadow-15dp() {
  box-shadow: 0px 8px 9px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity),
              0px 15px 22px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
              0px 6px 28px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
}
@mixin shadow-16dp() {
  box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity),
              0px 16px 24px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
              0px 6px 30px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
}
@mixin shadow-17dp() {
  box-shadow: 0px 8px 11px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity),
              0px 17px 26px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
              0px 6px 32px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
}
@mixin shadow-18dp() {
  box-shadow: 0px 9px 11px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity),
              0px 18px 28px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
              0px 7px 34px 6px rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
}
@mixin shadow-19dp() {
  box-shadow: 0px 9px 12px -6px rgba(0, 0, 0, $shadow-key-umbra-opacity),
              0px 19px 29px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
              0px 7px 36px 6px rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
}
@mixin shadow-20dp() {
  box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, $shadow-key-umbra-opacity),
              0px 20px 31px 3px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
              0px 8px 38px 7px rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
}
@mixin shadow-21dp() {
  box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, $shadow-key-umbra-opacity),
              0px 21px 33px 3px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
              0px 8px 40px 7px rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
}
@mixin shadow-22dp() {
  box-shadow: 0px 10px 14px -6px rgba(0, 0, 0, $shadow-key-umbra-opacity),
              0px 22px 35px 3px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
              0px 8px 42px 7px rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
}
@mixin shadow-23dp() {
  box-shadow: 0px 11px 14px -7px rgba(0, 0, 0, $shadow-key-umbra-opacity),
              0px 23px 36px 3px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
              0px 9px 44px 8px rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
}
@mixin shadow-24dp() {
  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, $shadow-key-umbra-opacity),
              0px 24px 38px 3px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
              0px 9px 46px 8px rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
}

/* Animations */

@mixin material-animation-fast-out-slow-in($duration:0.2s) {
  transition-duration: $duration;
  transition-timing-function: $animation-curve-fast-out-slow-in;
}

@mixin material-animation-linear-out-slow-in($duration:0.2s) {
  transition-duration: $duration;
  transition-timing-function: $animation-curve-linear-out-slow-in;
}

@mixin material-animation-fast-out-linear-in($duration:0.2s) {
  transition-duration: $duration;
  transition-timing-function: $animation-curve-fast-out-linear-in;
}

@mixin material-animation-default($duration:0.2s) {
  transition-duration: $duration;
  transition-timing-function: $animation-curve-default;
}

/* Dialog */

@mixin dialog-width($units:5) {
  @if(type_of($units) != 'number') {
    @error "The unit given to dialog-width should be a number.";
  }
  // 56dp is the base unit width for Dialogs.
  // With 5 units being the number of units for a mobile device.
  // https://goo.gl/sK2O5o
  width: $units * 56px;
}


// netTrek
// this mixin creates vendor-prefix versions of the transferred property
//
// @param {String} $property
//   Property to prefix
//
// @param {*} $value
//   Value to use
//
// @param {List} $prefixes
//   Prefixes to define
//
// @example scss - Usage
//   .element {
//       @include prefixer(border-radius, 10px, webkit ms spec);
//   }
//
// @example css - CSS Output
//   .element {
//       -webkit-border-radius: 10px;
//       -moz-border-radius: 10px;
//       border-radius: 10px;
//  }

@mixin prefixer($property, $value, $prefixes) {
  @each $prefix in $prefixes {

    @if $prefix == webkit {
      -webkit-#{$property}: $value;

    } @else if $prefix == moz {
      -moz-#{$property}: $value;

    } @else if $prefix == ms {
      -ms-#{$property}: $value;

    } @else if $prefix == spec {
      #{$property}: $value;

    } @else  {
      @warn "Unrecognized prefix: #{$prefix}";
    }
  }
}