@use "space-constants" as space;

/* Breakpoints */

// Firstly the trivial 0 size (of course), then:
$screen-xs: 26rem !default; // ~416px (DEPRECATED)
$screen-sm: 34rem !default; // ~544px (DEPRECATED)

// Considered to be the "tablet" sizes in discussion
$screen-md: 37.5rem !default; // ~600px
$screen-lg: 64rem !default; // ~1024px (DEPRECATED)

// Considered to be the "desktop" size in discussion
$screen-xl: 75rem !default; // ~1200px

/* Media query strings */

// x-small (DEPRECATED)
$screen-xs-up: "(min-width: #{$screen-xs})" !default;
$screen-xs-down: "(max-width: #{$screen-xs - 0.0625rem})" !default;
$screen-xs-sm: "(min-width: #{$screen-xs}) and (max-width: #{$screen-sm - 0.0625rem})" !default;

// small (DEPRECATED)
$screen-sm-up: "(min-width: #{$screen-sm})" !default;
$screen-sm-down: "(max-width: #{$screen-sm - 0.0625rem})" !default;
$screen-sm-md: "(min-width: #{$screen-sm}) and (max-width: #{$screen-md - 0.0625rem})" !default;

// medium
$screen-md-up: "(min-width: #{$screen-md})" !default;
$screen-md-down: "(max-width: #{$screen-md - 0.0625rem})" !default;
$screen-md-lg: "(min-width: #{$screen-md}) and (max-width: #{$screen-lg - 0.0625rem})" !default;

// large (DEPRECATED)
$screen-lg-up: "(min-width: #{$screen-lg})" !default;
$screen-lg-down: "(max-width: #{$screen-lg - 0.0625rem})" !default;
$screen-lg-xl: "(min-width: #{$screen-lg}) and (max-width: #{$screen-xl - 0.0625rem})" !default;

// x-large
$screen-xl-up: "(min-width: #{$screen-xl})" !default;
$screen-xl-down: "(max-width: #{$screen-xl - 0.0625rem})" !default;