@mixin random-bgr() {
  background: rgb(math.random(255) math.random(255) math.random(255));
}

@mixin fixed-bgr() {
  background: red;
}

@mixin debug-divs() {
  @for $i from 1 through 500 {
    div:nth-child(#{$i}) {
      @include fixed-bgr;
    }
  }
}
@mixin debug-imgs() {
  img {
    outline: 5px solid red;
  }
  img[alt] {
    outline: none;
  }
  img[alt=''] {
    outline: 5px solid yellow;
  }
}
@mixin debug-links() {
  a {
    outline: 5px solid yellow;
  }
  a[title] {
    outline: none;
  }
  a[href='#'],
  a[href*='javascript'] {
    outline: 5px solid yellow;
  }
  a[target] {
    outline: 5px solid yellow;
  }
}
@mixin debug-forms() {
  ul,
  ol {
    > *:not(li) {
      outline: 5px solid red;
    }
  }
  th {
    outline: 5px solid yellow;
  }
  th[scope] {
    outline: none;
  }
  table > tr {
    outline: 5px solid yellow;
  }
  tbody + tfoot {
    outline: 5px solid yellow;
  }
  form {
    outline: 5px solid red;
  }
  form[action] {
    outline: none;
  }
  textarea,
  input {
    outline: 5px solid red;
  }
  input[type] {
    outline: none;
  }
  textarea[rows][cols] {
    outline: none;
  }
  input[type='submit'] {
    outline: 5px solid red;
  }
  input[type='submit'][value] {
    outline: none;
  }
}
@mixin debug-fine() {
  [style] {
    outline: 5px solid yellow;
  }
  :empty {
    outline: 5px solid yellow;
  }
  [id] {
    outline: 5px solid yellow;
  }
  div:empty,
  span:empty,
  li:empty,
  p:empty,
  td:empty,
  th:empty {
    margin: 5px;
    border: 5px dotted yellow !important;
  }
  *[alt=''],
  *[title=''],
  *[class=''],
  *[id=''],
  a[href=''],
  a[href='#'] {
    border: 5px solid yellow !important;
  }
  applet,
  basefont,
  center,
  dir,
  font,
  isindex,
  menu,
  s,
  strike,
  u {
    border: 5px dotted red !important;
  }
  *[background],
  *[bgcolor],
  *[clear],
  *[color],
  *[compact],
  *[noshade],
  *[nowrap],
  *[size],
  *[start],
  *[bottommargin],
  *[leftmargin],
  *[rightmargin],
  *[topmargin],
  *[marginheight],
  *[marginwidth],
  *[alink],
  *[link],
  *[text],
  *[vlink],
  *[align],
  *[valign],
  *[hspace],
  *[vspace],
  *[height],
  *[width],
  ul[type],
  ol[type],
  li[type] {
    border: 5px solid red !important;
  }
  input[type='button'],
  big,
  tt {
    border: 5px dotted #3f0 !important;
  }
  *[border],
  a[target],
  table[cellpadding],
  table[cellspacing],
  *[name] {
    border: 5px solid #3f0 !important;
  }
}
@mixin debug-all() {
  @include debug-divs;
  @include debug-links;
  @include debug-forms;
  @include debug-fine;
  @include debug-types;
}
@mixin debug-types($minheaders) {
  @for $i from 1 through length($minheaders) {
    .#{nth(map-keys($minheaders), $i)} {
      position: relative;
      border: 1px solid #96c3ac;
      &::after {
        content: '#{nth(map-keys($minheaders), $i)} ' !important;
        position: absolute;
        background-color: red;
        opacity: 1;
        white-space: nowrap;
        color: $c-white;
        padding: 2px;
        left: 0;
        font-size: 10px;
        font-weight: bold;
      }
    }
  }
}