/*
  Width breakpoints define the LOWEST width at which that viewport is active
  e.g. if the HD desktop breakpoint is 1440px, then the HD Desktop viewport range is from 1440px inclusive and up.

*/

$width-breakpoint-desktop: 1280px;
$width-breakpoint-modal: 1024px;
$width-breakpoint-mobile-l: 600px;
$width-breakpoint-mobile-s: 320px;
$width-breakpoint-sm: $width-breakpoint-mobile-s;
$width-breakpoint-md: $width-breakpoint-mobile-l;
$width-breakpoint-lg: $width-breakpoint-modal;
$width-breakpoint-xl: $width-breakpoint-desktop;

@mixin desktop {
  @media (min-width: #{$width-breakpoint-desktop}) {
    @content;
  }
}

@mixin tablet {
  @media (min-width: #{$width-breakpoint-modal}) {
    @content;
  }
}

@mixin modal {
  @media (min-width: #{$width-breakpoint-modal}) and (max-width: #{$width-breakpoint-desktop - 1px}) {
    @content;
  }
}

@mixin mobile-l {
  @media (min-width: #{$width-breakpoint-mobile-l}) {
    @content;
  }
}

@mixin mobile-s {
  @media (min-width: 0) {
    @content;
  }
}

@mixin xl {
  @media (min-width: #{$width-breakpoint-xl}) {
    @content;
  }
}

@mixin lg {
  @media (min-width: #{$width-breakpoint-lg}) {
    @content;
  }
}

@mixin md {
  @media (min-width: #{$width-breakpoint-md}) {
    @content;
  }
}

@mixin sm {
  @media (min-width: 0) {
    @content;
  }
}