/*////////////////////////////////////////////////////////*/
/*//                                                    //*/
/*//    BREAKPOINT BAR                                  //*/
/*//                                                    //*/
/*////////////////////////////////////////////////////////*/

///
//
//_breakpoint-debug.scss: Shows the current breakpoint as on overlay at the bottom of the page.
//
//

body::before {

  display: none;
  // font-weight: bold;
  text-align: center;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;
  content: '0px - 480px'; // scss-lint:disable ZeroUnit
  color: white;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .6);
  background: rgba(255, 0, 0, .8);
  padding: 2px 2px 3px;
  font-family: Consolas, Menlo, Monaco, "Lucida Console", "Courier New", monospace;
  font-size: $font-size-1;
  line-height: $line-height-flat;

  @include breakpoint(S) {
    background: rgba(0, 0, 0, 1);
    content: 'S: 481px+';
  }

  @include breakpoint(M) {
    content: 'M: 600px+';
    background: rgba(204, 102, 0, .8);
  }

  @include breakpoint(L) {
    content: 'L: 865px +';
    background: rgba(50, 20, 50, .8);
  }

  @include breakpoint(XL) {
    content: 'XL: 1260px +';
    background: rgba(0, 70, 0, .8);
  }

  html:hover & {

    display: block;

    @media print {
      display: none;
    }

  }

  .is-showing-breakpoints & {
    display: block;
  }

  @media print {
    display: none;
  }

}