/* 
   Uses Material UI's breakpoints sm, md, and lg breakpoints: https://mui.com/material-ui/customization/breakpoints/
   Note: only raw values should be used and not CSS functions like calc, minmax, etc., so that values can be used via JavaScript
 */
$desktop-min: 900px;
$tablet-max: 899px;
$tablet-min: 600px;
$mobile-max: 599px;
$mobile-min: 0px;

$breakpoints: (
  desktopMin: $desktop-min,
  tabletMax: $tablet-max,
  tabletMin: $tablet-min,
  mobileMax: $mobile-max,
  mobileMin: $mobile-min,
);

/* Export the SCSS map to a JS object */
:export {
  @each $name, $value in $breakpoints {
    #{$name}: #{$value};
  }
}