// @import "variables";

@mixin transition-default($duration: .1s, $property: all, $delay: .0s) {
  transition: $property $duration $transitionDefaultTimingFunction $delay;
}

@mixin transition-series($params...) {
  transition: $params;
}

@mixin transition-only-for($duration: .5s, $properties: (all), $delay: 0s, $transitionTimingFunction: $transitionDefaultTimingFunction) {
  $scaffold: ();
  @each $property in $properties {
    $scaffold: append($scaffold, #{$property} #{$duration} #{$transitionTimingFunction} #{$delay}, comma);
  }
  transition: $scaffold;
}

/**
 * Extended mixin taken from angular-material (@see )
 * @param {string} $color - color for input placeholder
 * @param {:hover|:active|:focus|null} $target-pseudo - parent pseudo-class
 * E.g.: @include input-placeholder-color(#faf);
 * E.g.: @include input-placeholder-color(#faf, (hover: #ff0));
 * E.g.: @include input-placeholder-color(#faf, (hover: #ff0, active: #0ff), false) {
 *    transition: all .2s ease;
 * }
 */
@mixin input-placeholder-color($color, $target-pseudo-colors: (), $contentInBase: true) {
  $pseudos: '::-webkit-input-placeholder', ':-moz-placeholder', '::-moz-placeholder',
            ':-ms-input-placeholder',  '::-webkit-input-placeholder';

  @each $pseudo in $pseudos {
    &#{$pseudo} {
      color: $color;
      @if ($contentInBase) {
        @content;
      }
    }
    @each $target-pseudo, $target-pseudo-color in $target-pseudo-colors {
      &:#{$target-pseudo}#{$pseudo} {
        color: $target-pseudo-color;
        @if (not $contentInBase) {
          @content;
        }
      }
    }
  }
}

// xs, sm, md, lg, xl
@mixin media-query($media, $orientation: null) {
  @if $media == xs or $media == lr-xs {
    @if ($orientation) {
      @media screen and (max-width: $layout-breakpoint-xs - 1) and (orientation: $orientation) { @content; }
    }
    @else {
      @media screen and (max-width: $layout-breakpoint-xs - 1) { @content; }
    }
  }
  @else if $media == gt-xs {
    @if ($orientation) {
      @media screen and (min-width: $layout-breakpoint-xs) and (orientation: $orientation) { @content; }
    }
    @else {
      @media screen and (min-width: $layout-breakpoint-xs) { @content; }
    }
  }
  @else if $media == sm {
    @if ($orientation) {
      @media screen and (min-width: $layout-breakpoint-xs) and (max-width: $layout-breakpoint-sm - 1) and (orientation: $orientation) { @content; }
    }
    @else {
      @media screen and (min-width: $layout-breakpoint-xs) and (max-width: $layout-breakpoint-sm - 1) { @content; }
    }
  }
  @else if $media == lr-sm {
    @if ($orientation) {
      @media screen and (max-width: $layout-breakpoint-sm - 1) and (orientation: $orientation) { @content; }
    }
    @else {
      @media screen and (max-width: $layout-breakpoint-sm - 1) { @content; }
    }
  }
  @else if $media == gt-sm {
    @if ($orientation) {
      @media screen and (min-width: $layout-breakpoint-sm) and (orientation: $orientation) { @content; }
    }
    @else {
      @media screen and (min-width: $layout-breakpoint-sm) { @content; }
    }
  }
  @else if $media == md {
    @if ($orientation) {
      @media screen and (min-width: $layout-breakpoint-sm) and (max-width: $layout-breakpoint-md - 1) and (orientation: $orientation) { @content; }
    }
    @else {
      @media screen and (min-width: $layout-breakpoint-sm) and (max-width: $layout-breakpoint-md - 1) { @content; }
    }
  }
  @else if $media == lr-md {
    @if ($orientation) {
      @media screen and (max-width: $layout-breakpoint-md - 1) and (orientation: $orientation) { @content; }
    }
    @else {
      @media screen and (max-width: $layout-breakpoint-md - 1) { @content; }
    }
  }
  @else if $media == gt-md {
    @if ($orientation) {
      @media screen and (min-width: $layout-breakpoint-md) and (orientation: $orientation) { @content; }
    }
    @else {
      @media screen and (min-width: $layout-breakpoint-md) { @content; }
    }
  }
  @else if $media == lg {
    @if ($orientation) {
      @media screen and (min-width: $layout-breakpoint-md) and (max-width: $layout-breakpoint-lg - 1) and (orientation: $orientation) { @content; }
    }
    @else {
      @media screen and (min-width: $layout-breakpoint-md) and (max-width: $layout-breakpoint-lg - 1) { @content; }
    }
  }
  @else if $media == lr-lg or $media == lr-xl {
    @if ($orientation) {
      @media screen and (max-width: $layout-breakpoint-lg - 1) and (orientation: $orientation) { @content; }
    }
    @else {
      @media screen and (max-width: $layout-breakpoint-lg - 1) { @content; }
    }
  }
  @else if $media == gt-lg {
    @if ($orientation) {
      @media screen and (min-width: $layout-breakpoint-lg) and (orientation: $orientation) { @content; }
    }
    @else {
      @media screen and (min-width: $layout-breakpoint-lg) { @content; }
    }
  }
  @else if $media == xl or $media == gt-xl {
    @if ($orientation) {
      @media screen and (min-width: $layout-breakpoint-lg) and (orientation: $orientation) { @content; }
    }
    @else {
      @media screen and (min-width: $layout-breakpoint-lg) { @content; }
    }
  }
  @else {
    @if ($orientation) {
      @media screen and (orientation: $orientation) { @content; }
    }
    @else {
      @media screen { @content; }
    }
  }
}

@mixin media-query-toolbar($property) {
  #{$property}: $toolbar-height;
  @include media-query(lr-sm, landscape) {
    #{$property}: $toolbar-height-mobile-landscape;
  }
  @include media-query(lr-sm, portrait) {
    #{$property}: $toolbar-height-mobile-portrait;
  }
}