// (C) 2007-2018 GoodData Corporation
// Here we define the breakpoints which will become the upper border for each media size.
// The function em-calc() calculates the em-value from a px-value.

@import "~@gooddata/goodstrap/lib/core/styles/foundations";

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

// Here we define the lower and upper bounds for each media size
$small-range: (0, $small-breakpoint) !default; /* 0, 640px */
$medium-range: ($small-breakpoint + em-calc(1), $medium-breakpoint) !default; /* 641px, 1024px */
$large-range: ($medium-breakpoint + em-calc(1), $large-breakpoint) !default; /* 1025px, 1440px */
$xlarge-range: ($large-breakpoint + em-calc(1), $xlarge-breakpoint) !default; /* 1441px, 1920px */
$xxlarge-range: ($xlarge-breakpoint + em-calc(1), em-calc(99999999)) !default; /* 1921px, ... */

// Media Queries
$screen: "only screen" !default;

$landscape: "#{$screen} and (orientation: landscape)" !default;
$portrait: "#{$screen} and (orientation: portrait)" !default;

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

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

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

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

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

$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)"
);