/* ------------------------------------*\
    $MEDIA QUERY TESTS
\*------------------------------------ */

@if $tests == true {
  body {

    @include media('>xsmall') {
      &::before {
        content: 'xsmall: #{$xsmall}';
      }

      &::after,
      &::before {
        background: dodgerblue;
      }
    }

    @include media('>small') {
      &::before {
        content: 'small: #{$small}';
      }

      &::after,
      &::before {
        background: darkseagreen;
      }
    }

    @include media('>medium') {
      &::before {
        content: 'medium: #{$medium}';
      }

      &::after,
      &::before {
        background: lightcoral;
      }
    }

    @include media('>large') {
      &::before {
        content: 'large: #{$large}';
      }

      &::after,
      &::before {
        background: mediumvioletred;
      }
    }

    @include media('>xlarge') {
      &::before {
        content: 'xlarge: #{$xlarge}';
      }

      &::after,
      &::before {
        background: hotpink;
      }
    }

    @include media('>xxlarge') {
      &::before {
        content: 'xxlarge: #{$xxlarge}';
      }

      &::after,
      &::before {
        background: orangered;
      }
    }

    @include media('>xxxlarge') {
      &::before {
        content: 'xxxlarge: #{$xxxlarge}';
      }

      &::after,
      &::before {
        background: dodgerblue;
      }
    }
  }
    body::before {
      display: block;
      position: fixed;
      z-index: $z-index-mq-display;
      background: black;
      bottom: 0;
      right: 0;
      padding: 0.5em 1em;
      content: 'No Media Query';
      color: transparentize(white, 0.25);
      border-top-left-radius: 10px;
      font-size: (12/16)+em;
    }

      @media print {
    body::before {
        display: none
    }
      }

    body::after {
      display: block;
      position: fixed;
      height: 5px;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: $z-index-mq-display;
      content: '';
      background: black;
    }

      @media print {

    body::after {
        display: none
    }
      }
}