/* *****************************************************************************
*
*  Media queries mixins
*
* ***************************************************************************** */

/**
      @mixin media-scale($elem, $defaultValue, $mdValue, $lgValue)

      $elem             The CSS property
      $defaultValue     The default mobile first value of the property
      $mdValue          The value of the property after the md breakpoint
      $lgValue          The value of the property after the lg breakpoint

      -------------------------------------------------------------

      input:
        @include media-scale(max-width, 97vw, 93vw, 80vw);

      -------------------------------------------------------------

      output:
        max-width : 97vw
        @include media-breakpoint-up(md){
          max-width : 93vw
        }
        @include media-breakpoint-up(lg){
          max-width : 80vw
        }
*/

@mixin media-scale($elem, $defaultValue, $mdValue:$defaultValue, $lgValue:$mdValue, $xlValue:$lgValue) {
  #{$elem}: $defaultValue;

  @include media-breakpoint-up(md){
    #{$elem}: $mdValue;
  }
  @include media-breakpoint-up(lg){
    #{$elem}: $lgValue;
  }
  @include media-breakpoint-up(xl){
    #{$elem}: $xlValue;
  }
}

@mixin media-up($breakpoint){
  @media (min-width: $breakpoint) {
    @content;
  }
}