/***
  Breakpoints that map to purecss
  ----------------------
  author: 2014 Alan Languirand alanguirand@apigee.com
***/

/* Strings to be used in @media tags */

/* Mobile first stuff */
@sm: ~"screen and (min-width: 35.5em)";
@md: ~"screen and (min-width: 48.1em)";
@lg: ~"screen and (min-width: 64em)";
@xl: ~"screen and (min-width: 80em)";

/* Inverted mobile first queries. read as "after small" or "after medium" */
@asm: ~"screen and (max-width: 35.5em)";
@amd: ~"screen and (max-width: 48.1em)";
@alg: ~"screen and (max-width: 64em)";
@axl: ~"screen and (max-width: 80em)";

/* simple ways to hide stuff */
.hide-sm { @media @sm {display: none !important;} }
.hide-md { @media @md {display: none !important;} }
.hide-lg { @media @lg {display: none !important;} }
.hide-xl { @media @xl {display: none !important;} }

.before-sm { @media @asm {display: none !important;} }
.before-md { @media @amd {display: none !important;} }
.before-lg { @media @alg {display: none !important;} }
.before-xl { @media @axl {display: none !important;} }


.only-sm { 
  .hide-md(); .hide-lg(); .hide-xl(); 
}

.only-md { 
  .hide-sm(); .hide-lg(); .hide-xl(); 
}

.only-lg { 
  .hide-md(); .hide-sm(); .hide-xl(); 
}

.only-xl { 
  .hide-md(); .hide-lg(); .hide-sm(); 
}
