/**
 * Overlay for inspection of elements (see dev.js)
 */

.estatico-dev-overlay {
  $color: rgba(100,200,255,.4);

  position: relative;
  box-shadow: inset 0 0 0 4px $color;

  &:after {
    text-transform: capitalize;
    z-index: 9999999;
    position: absolute;
    top: -15px;
    left: 0;
    white-space: nowrap;
    background: $color;
    color: #000;
    font-size: 10px;
    content: attr(data-estatico-dev);
  }
}

.estatico-dev-overlay--variant {
  $color: rgba(208,235,98,.4);

  box-shadow: inset 0 0 0 4px $color;

  &:after {
    background: $color;
  }
}