// black alpha = 90% // background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAE0lEQVQIW2NkYGB4BsQogJEGggAKvQSEMnZimwAAAABJRU5ErkJggg==) repeat; // black alpha = 70% // background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAE0lEQVQIW2NkYGDYDMQogJEGggDP6QOF2TXaEQAAAABJRU5ErkJggg==) repeat; // black alpha = 50% // background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAE0lEQVQIW2NkYGCoB2IUwEgDQQCT/QKB/1JzRQAAAABJRU5ErkJggg==) repeat;

// Core functions @import '../../functions';

// Core variables and mixins @import '../../variables'; @import '../../mixins';

// The Grid @import '../../grid';

@if $compile-grid {

@include grid-debug();

}

.debug-cross-section {

.container-fixed,
.container-liquid,
&.container-fixed,
&.container-liquid {
  background: url('../images/bu-cross-section.png');
  background-size: building-units(2) building-units(2);
}

}

.debug-bu-overlay {

background-size: building-units(2) building-units(2);
position: absolute;
z-index: 99997;
top: 0;
left: 0;
right: 0;
pointer-events: none;
background: url('../images/bu-cross-section-alpha.png');
opacity: .25;

}

debug {

.media-frame,
&.media-frame {
  background: #ddf;
}

}

// scss-lint:disable IdSelector debug-thingy {

position: fixed;
display: block;

// black alpha = 70%
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAE0lEQVQIW2NkYGDYDMQogJEGggDP6QOF2TXaEQAAAABJRU5ErkJggg==') repeat;
border: 1px solid #000;
border-color: rgba(0, 0, 0, .2);
top: 12px;
right: 12px;
padding: 12px;
border-radius: 6px;
font-size: .75em;
color: #fff;
z-index: 99999;
min-width: 100px;

.fa {
  display: inline-block;
  width: 16px;
}

.color-swatch {
  display: inline-table;
  width: building-units(2);
  height: building-units(2);
  border: 2px solid rgba(0, 0, 0, 0);
  background-color: rgba(0, 0, 0, 0);
  margin: 7px 0;

  outline: inset 1px #ccc;

  .fa {
    display: table-cell;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    text-align: center;
  }
}

}

debug-thingy .size-info {

font-size: 10px;

}

debug-thingy .icon-cancel {

position: absolute;
top: 2px;
right: 2px;
font-size: 8px;

}

debug-thingy .size-o-tron {

position: relative;
background: #000;
width: 100%;
height: 2px;
margin: 10px 0 20px;
cursor: move;

}

.size-o-tron .screensize {

position: absolute;
left: 0;
right: 0;
bottom: 0;
text-align: center;
color: #666;
margin-bottom: 0;

}

debug-thingy .size-o-tron .size-bar {

background: #0ca1dc;
width: 0;
height: 2px;

}

debug-thingy .size-o-tron .breakpoint {

background: #eee;
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 2px;

} // scss-lint:enable IdSelector

.debug-breakpoint-thingy {

position: fixed;
z-index: 99998;
top: 0;
left: 0;
width: 0;
height: 100%;
border-left: 1px dashed #0ca1dc;
border-color: rgba(12, 161, 220, .75);

}

.debug-image-overlay {

position: absolute;
background-repeat: no-repeat;
z-index: 99996;
top: 0;
left: 0;
width: 100%;
min-height: 100%;
opacity: .25;
pointer-events: none;

&.fixed {
  position: fixed;
}

&.align-left {
  background-position: top left;
  text-align: left;
}

&.align-center {
  background-position: top center;
  text-align: center;
}

&.align-right {
  background-position: top right;
  text-align: right;
}

// results in a 50% grey, if html and overlay are equal.
// contrasts though aren't as good as with mixed-blend-mode
&.inverted {
  opacity: .5;
  // most prefixes not supported today, but it won't hurt and the time may come.
  -webkit-filter: invert(100%);
  -moz-filter: invert(100%);
  -o-filter: invert(100%);
  -ms-filter: invert(100%);
  filter: invert(100%);
}

// Currently only enabled in Chrome through the "experimental Web Platform features" flag in chrome://flags
// Will be featured in Safari 8 and Firefox 32

&.mixed {
  opacity: 1;
  // prefixes not supported today, but it won't hurt and the time may come.
  -webkit-mix-blend-mode: difference;
  -moz-mix-blend-mode: difference;
  -o-mix-blend-mode: difference;
  -ms-mix-blend-mode: difference;
  mix-blend-mode: difference;
}

}

.debug-breakpoint-thingy:before, .debug-breakpoint-thingy:after {

content: ' ';
// black alpha = 50%
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAE0lEQVQIW2NkYGCoB2IUwEgDQQCT/QKB/1JzRQAAAABJRU5ErkJggg==') repeat;
color: #fff;
padding: .1em .3em;

}

.debug-breakpoint-thingy:before {

text-align: right;

}

.debug-image-overlay-settings {

border-top: 1px solid #ccc;
margin: building-units(1) 0 0; //0;
padding: building-units(1) 0 0; //0;

button {
  background: #000;
}

.debug-col {
  width: 170px;

  span.icon {
    display: inline-block;
    width: 28px;
  }

  select,
  input {
    width: 116px;
    color: #666;
  }

  input[type="number"] {
    width: 40px;
  }

  input[type="range"] {
    vertical-align: middle;
  }
}

}

.measure-rect {

.measure-rect-background,
.measure-rect-thumb,
.measure-rect-border {
  position: fixed;
  display: block;
  z-index: 99998;
}

.measure-rect-background {
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  // black alpha = 70%
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAE0lEQVQIW2NkYGDYDMQogJEGggDP6QOF2TXaEQAAAABJRU5ErkJggg==') repeat;
}

.measure-rect-thumb {
  left: 100px;
  top: 100px;
  width: 20px;
  height: 20px;
  border: 1px solid #0090c4;
  // blue alpha = 50%
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAE0lEQVQIW2NkmHi0ngENMNJAEAAnuAkvTPFU7wAAAABJRU5ErkJggg==') repeat;

  &.top.left {
    cursor: nw-resize;
  }

  &.top.right {
    cursor: ne-resize;
  }

  &.bottom.left {
    cursor: sw-resize;
  }

  &.bottom.right {
    cursor: se-resize;
  }
}

.measure-rect-border {
  outline: 2px solid #0090c4;
  cursor: move;
}

}

.noselect {

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

}

.mouse-move-event-target-dummy {

display: block;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
min-height: 100%;
min-width: 100%;

}

.cursor-crosshair {

cursor: crosshair !important;

}

.debug-iframe {

position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
border: 0;
box-sizing: border-box;

}

.debug-scroll-pane {

position: absolute;
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
background: #333;
margin: 0;
padding: 0;
box-sizing: content-box;
overflow: auto;

}

.debug-scroll-pane-thumb {

position: fixed;
background: #fff;
margin: 0;
padding: 0;
width: 20px;
height: 20px;
border: 2px solid #000;

}

// scss-lint:disable IdSelector measure-rect-info {

display: none;

} // scss-lint:enable IdSelector

.breakpoint-thingy-wrapper {

position: relative;
width: 100%;
height: 100%;
background: #f00;

}

.debug-image-overlay-wrapper {

overflow: hidden;

}

@include create-emphased-classes($grid-settings-size-exclusive);

.visible-on, .hidden-on {

margin-bottom: 12px;

span {
  display: block;
  padding: 10px 12px;
  text-align: center;
  border-radius: 4px;
}

.hidden-xs,
.hidden-s,
.hidden-m,
.hidden-l,
.hidden-xl {
  color: #999;
  border: 1px solid #ddd;
  background-color: #eee;
}

.visible-xs-block,
.visible-s-block,
.visible-m-block,
.visible-l-block,
.visible-xl-block {
  color: #468847;
  border: 1px solid #d6e9c6;
  background-color: #dff0d8;
}

}