/* =============================================================================================================================
    Breakpoints / Mixins
   ============================================================================================================================= */

/*
 *  Breakpoints
 *
 */

// General breakpoints
$breakpoint-desktop-large: 1800px;
$breakpoint-desktop-small: 1200px;
$breakpoint-mobile-large: 900px;
$breakpoint-mobile-small: 600px;
$breakpoint-mobile-tiny: 360px;

// Specific device breakpoints
$breakpoint-tablet-landscape: 1024px;
$breakpoint-tablet-portrait: 768px;

// Specific cell breakpoints inside a flexible grid
$grid-cell-on-xl-screen: 1802px;
$grid-cell-on-l-screen: 1494px;
$grid-cell-on-m-screen: 1188px;

/*
 *  Mixins
 *
 *  Usage:
 *   .my-class {
 *      padding: 10px;
 *      
 *      @include up-to-desktop-small {
 *          padding: 20px;
 *      }
 *  }
 *
 */

@mixin up-to-desktop-large {
  @media print, screen and (max-width: $breakpoint-desktop-large) {
    @content;
  }
}

@mixin up-to-desktop-small {
  @media print, screen and (max-width: $breakpoint-desktop-small) {
    @content;
  }
}

@mixin up-to-mobile-large {
  @media print, screen and (max-width: $breakpoint-mobile-large) {
    @content;
  }
}

@mixin up-to-mobile-small {
  @media print, screen and (max-width: $breakpoint-mobile-small) {
    @content;
  }
}

@mixin up-to-mobile-tiny {
  @media print, screen and (max-width: $breakpoint-mobile-tiny) {
    @content;
  }
}

@mixin up-to-tablet-landscape {
  @media print, screen and (max-width: $breakpoint-tablet-landscape) {
    @content;
  }
}

@mixin up-to-tablet-portrait {
  @media print, screen and (max-width: $breakpoint-tablet-portrait) {
    @content;
  }
}

@mixin range-desktop {
  @media print, screen and (min-width: $breakpoint-mobile-large + 1) {
    @content;
  }
}

@mixin range-mobile {
  @media print, screen and (max-width: $breakpoint-mobile-large) {
    @content;
  }
}

// specific range for cells inside a flexible grid
@mixin grid-cell-xl-screen {
  @media print, screen and (max-width: $grid-cell-on-xl-screen) {
    @content;
  }
}

@mixin grid-cell-l-screen {
  @media print, screen and (max-width: $grid-cell-on-l-screen) {
    @content;
  }
}

@mixin grid-cell-m-screen {
  @media print, screen and (max-width: $grid-cell-on-m-screen) {
    @content;
  }
}