/*
  -------------------------
  Mobile  | 0px    - 767px
  -------------------------
  Tablet  | 768px  - 1024px
  -------------------------
  Desktop | 1025px - 1280px
  -------------------------
  Large   | 1281px & up
  -------------------------
*/

// MOBILE
$mobile: 'screen and (max-width: 767px)' !default;
$mobile-l: #{$mobile} 'and (orientation: landscape)' !default;
$mobile-p: #{$mobile} 'and (orientation: portrait)' !default;

// TABLET
$tablet-up: 'screen and (min-width: 768px)' !default;
$tablet-up-l: 'screen and (min-width: 768px) and (orientation: landscape)' !default;
$tablet-up-p: 'screen and (min-width: 768px) and (orientation: portrait)' !default;

$tablet-down: 'screen and (max-width: 1024px)' !default;
$tablet-down-l: 'screen and (max-width: 1024px) and (orientation: landscape)' !default;
$tablet-down-p: 'screen and (max-width: 1024px) and (orientation: portrait)' !default;

$tablet: 'screen and (min-width: 768px) and (max-width: 1024px)' !default;
$tablet-l: 'screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape)' !default;
$tablet-p: 'screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait)' !default;

// DESKTOP
$desktop-up: 'screen and (min-width: 1025px)' !default;
$desktop-down: 'screen and (max-width: 1280px)' !default;
$desktop: 'screen and (min-width: 1025px) and (max-width: 1280px)' !default;

// DESKTOP-LARGE
$desktop-large: 'screen and (min-width: 1281px)' !default;


$breakpoints: (
  $desktop-large dl,

  $desktop d,
  $desktop-down d-down,
  $desktop-up d-up,

  $tablet t,
  $tablet-l t-l,
  $tablet-p t-p,

  $tablet-down t-down,
  $tablet-down-l t-down-l,
  $tablet-down-p t-down-p,

  $tablet-up t-up,
  $tablet-up-l t-up-l,
  $tablet-up-p t-up-p,

  $mobile m,
  $mobile-l m-l,
  $mobile-p m-p
);

$pixelSizes: 0 4 8 12 16 20 24 28 32 36 40 44 48 52 56 60 64;