$small-breakpoint: em-calc(640);
$medium-breakpoint: em-calc(1024);
$large-breakpoint: em-calc(1440);
$xlarge-breakpoint: em-calc(1920);

$small-range: (0, $small-breakpoint);
$medium-range: ($small-breakpoint + em-calc(1), $medium-breakpoint);
$large-range: ($medium-breakpoint + em-calc(1), $large-breakpoint);
$xlarge-range: ($large-breakpoint + em-calc(1), $xlarge-breakpoint);
$xxlarge-range: ($xlarge-breakpoint + em-calc(1), em-calc(99999999));

$vertical-small-breakpoint: em-calc(600);
$vertical-medium-breakpoint: em-calc(800);

$vertical-small-range: (0, $vertical-small-breakpoint);
$vertical-medium-range: (
  $vertical-small-breakpoint + em-calc(1),
  $vertical-medium-breakpoint
);
$vertical-large-range: (
  $vertical-medium-breakpoint + em-calc(1),
  em-calc(99999999)
);

$screen: 'only screen';

$landscape: '#{$screen} and (orientation: landscape)';
$portrait: '#{$screen} and (orientation: portrait)';

$small-up: $screen;
$small-only: '#{$screen} and (max-width: #{upper-bound($small-range)})';

$medium-up: '#{$screen} and (min-width:#{lower-bound($medium-range)})';
$medium-only: '#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})';

$large-up: '#{$screen} and (min-width:#{lower-bound($large-range)})';
$large-only: '#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})';

$xlarge-up: '#{$screen} and (min-width:#{lower-bound($xlarge-range)})';
$xlarge-only: '#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})';

$xxlarge-up: '#{$screen} and (min-width:#{lower-bound($xxlarge-range)})';
$xxlarge-only: '#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})';

$v-small-only: '#{$screen} and (max-height: #{$vertical-small-breakpoint})';
$v-medium-only: '#{$screen} and (min-height:#{lower-bound($vertical-medium-range)}) and (max-height:#{upper-bound($vertical-medium-range)})';
$v-medium-down: '#{$screen} and (max-height:#{upper-bound($vertical-medium-range)})';

$retina: (
  '#{$screen} and (-webkit-min-device-pixel-ratio: 2)',
  '#{$screen} and (min--moz-device-pixel-ratio: 2)',
  '#{$screen} and (-o-min-device-pixel-ratio: 2/1)',
  '#{$screen} and (min-device-pixel-ratio: 2)',
  '#{$screen} and (min-resolution: 192dpi)',
  '#{$screen} and (min-resolution: 2dppx)'
);

// Legacy
$small: $medium-up;
$medium: $medium-up;
$large: $large-up;

$screen-xs: 480px;
$screen-xs-min: $screen-xs;
$screen-phone: $screen-xs-min;

// Small screen / tablet
// Note: Deprecated $screen-sm and $screen-tablet as of v3.0.1
$screen-sm: $small-breakpoint;
$screen-sm-min: $screen-sm;
$screen-tablet: $screen-sm-min;

// Medium screen / desktop
// Note: Deprecated $screen-md and $screen-desktop as of v3.0.1
$screen-md: $medium-breakpoint;
$screen-md-min: $screen-md;
$screen-desktop: $screen-md-min;

// Large screen / wide desktop
// Note: Deprecated $screen-lg and $screen-lg-desktop as of v3.0.1
$screen-lg: $large-breakpoint;
$screen-lg-min: $screen-lg;
$screen-lg-desktop: $screen-lg-min;

// So media queries don't overlap when required, provide a maximum
$screen-xs-max: ($screen-sm-min - 1);
$screen-sm-max: ($screen-md-min - 1);
$screen-md-max: ($screen-lg-min - 1);

$grid-float-breakpoint-max: ($screen-sm-min - 1);

/**
 * @component variables
 * @section mediaqueries
 *
 * @variable $screen - screens only
 * @variable $landscape - landscape orientation
 * @variable $portrait - portrait orientation
 * @variable $small-up - screens 0px width and larger
 * @variable $small-only - small screens from 0 - 640px width
 * @variable $medium-up - screens 640px and larger
 * @variable $medium-only - screens 640px to 1024px
 * @variable $large-up - screens 1025px and larger
 * @variable $large-only - screens 1025px to 1440px
 * @variable $xlarge-up - screens 1441px and larger
 * @variable $xlarge-only - screens 1441px to 1920px
 * @variable $xxlarge-up - screens 1921px and larger
 * @variable $xxlarge-only - same as $xxlarge-up
 * @variable $retina - retina screens
 *
 * @scss
 *    @media #{$medium-up} {
 *      **Media specific styles**
 *    }
 *
 */