
/* BREAKPOINTS */

// We are using `px` instead of `rem` because if we use `rem` we have a buggy behaviour is Safari. In an old version of the `panel` demo page there was a strange animation at the beginning, caused by a faulty auto-attacch-panel media query (no longer CSS-only), caused probably by the browser changing viewport's width value for apparently no good reason
// Also Javascript doens't really understand other units
// `rem` or any other meaningful unit is supported as well

$breakpoint-xsmall: 0 !default;
$breakpoint-small: 512px !default;
$breakpoint-medium: 768px !default;
$breakpoint-large: 1024px !default;
$breakpoint-xlarge: 1216px !default;

/* BREAKPOINTS */

$breakpoints: (
  'xsmall': $breakpoint-xsmall,
  'small': $breakpoint-small,
  'medium': $breakpoint-medium,
  'large': $breakpoint-large,
  'xlarge': $breakpoint-xlarge
) !default;

@include assert-ascending( $breakpoints, '`$breakpoints` values must be defined in ascending order' );

/* EPSILON */

$breakpoint-epsilon: .1 + ( if( is-empty( $breakpoints ), 0px, map-get( $breakpoints, last( map-keys( $breakpoints ) ) ) ) * 0 ) !default; // A value of `.01` for some reasons breaks the iPad Air (iOS 9.2)
