/* Debug utilities */
.debug,
.debug * {
  outline: 1px solid blue;
}
.debug:before {
  content: "N/A";
  @apply absolute pin-t pin-l;
  @apply bg-neptune-2 bold text-white;
  @apply p-0x;
}
@screen sm {
  .debug,
  .debug * {
    outline: 1px solid teal;
  }
  .debug:before {
    content: "sm";
    @apply bg-mercury-2;
  }
}
@screen md {
  .debug,
  .debug * {
    outline: 1px solid orange;
  }
  .debug:before {
    content: "md";
    @apply bg-saturn-2;
  }
}
@screen lg {
  .debug,
  .debug * {
    outline: 1px solid red;
  }
  .debug:before {
    content: "lg";
    @apply bg-mars-2;
  }
}
@screen xl {
  .debug,
  .debug * {
    outline: 1px solid pink;
  }
  .debug:before {
    content: "xl";
    @apply bg-venus-2;
  }
}

/* See classes on hover */
.debug-class *[class] {
  outline: 1px solid green;
  cursor: pointer;
  &:before {
    position: absolute;
    margin-top: -2rem;
    content: attr(class);
    @apply .text-white .p-0x;
    @apply .hidden;
    @apply .bg-green;
  }
  &:hover {
    &:before {
      @apply .inline;
    }
  }
  *[class] {
    outline: 1px solid orange;
    &:before {
      @apply .bg-orange;
    }
    *[class] {
      outline: 1px solid red;
      &:before {
        @apply .bg-red;
      }
    }
  }
}

/* Make images without alt pop for debug */
img:not([alt]) {
  filter: grayscale(100%);
}