// Breakpoint Debugger // ——————- // if `$show-query` variable is set to `true` in `_vars.scss`, then // a small notifier tag will show at the bottom left screen // stating what breakpoint you are currently viewing in @if $show-query == true {

body:after {
  font-size: .75rem                   !important;
  text-transform: uppercase           !important;
  letter-spacing: .08em               !important;
  padding: .5em 1em                   !important;
  color: $white                       !important;
  background-color: rgba($black, .7)  !important;
  position: fixed                     !important;
  left: 0                             !important;
  bottom: 0                           !important;
  z-index: 9999                       !important;

  content: 'small screen';

  //@include breakpoint($medium) { content: 'medium screen'; }
  //@include breakpoint($large) { content: 'large screen'; }
  //@include breakpoint($xlarge) { content: 'xlarge screen'; }
  //@include breakpoint($xxlarge) { content: 'xxlarge screen'; }
  @media (min-width: 640px) {
    content: 'medium screen'; 
  }
  @media (min-width: 1024px) {
    content: 'large screen'; 
  }
  @media (min-width: 1200px) {
    content: 'xlarge screen'; 
  }
  @media (min-width: 1440px) {
    content: 'xxlarge screen'; 
  }
}

}