/* ------------------------------------------------------------------------ *\
   structure.debug
\* ------------------------------------------------------------------------ */

/**
 * Style tags debugger
 */
if nix.debug.tags
  if nix.debug.mq
    [nix-u-layout~="--boxed"]
      padding: 15px
      box-shadow: none

    +above(nix.mq.xxs)
      body, .debug
        background: #fff600

    // Extra Small Devices, Phones
    +above(nix.mq.xs)
      body, .debug
        background: #ffaa00

    // Small Devices, Tablets
    +above(nix.mq.sm)
      body, .debug
        background: #84bd00

    // Medium Devices, Desktops
    +above(nix.mq.md)
      body, .debug
        background: #9675ab

    // Large Devices, Wide Screens
    +above(nix.mq.lg)
      body, .debug
        background: #7689a9

  edit() // active jeet grid view

  body
    outline: 1px solid #2980b9 !important
  article
    outline: 1px solid #3498db !important
  nav
    outline: 1px solid #0088c3 !important
  aside
    outline: 1px solid #33a0ce !important
  section
    outline: 1px solid #66b8da !important
  header
    outline: 1px solid #99cfe7 !important
  footer
    outline: 1px solid #cce7f3 !important
  h1
    outline: 1px solid #162544 !important
  h2
    outline: 1px solid #314e6e !important
  h3
    outline: 1px solid #3e5e85 !important
  h4
    outline: 1px solid #449baf !important
  h5
    outline: 1px solid #c7d1cb !important
  h6
    outline: 1px solid #4371d0 !important
  main
    outline: 1px solid #2f4f90 !important
  address
    outline: 1px solid #1a2c51 !important
  div
    outline: 1px solid #036cdb !important
  p
    outline: 1px solid #ac050b !important
  hr
    outline: 1px solid #ff063f !important
  pre
    outline: 1px solid #850440 !important
  blockquote
    outline: 1px solid #f1b8e7 !important
  ol
    outline: 1px solid #ff050c !important
  ul
    outline: 1px solid #d90416 !important
  li
    outline: 1px solid #d90416 !important
  dl
    outline: 1px solid #fd3427 !important
  dt
    outline: 1px solid #ff0043 !important
  dd
    outline: 1px solid #e80174 !important
  figure
    outline: 1px solid #ff00bb !important
  figcaption
    outline: 1px solid #bf0032 !important
  table
    outline: 1px solid #00cc99 !important
  caption
    outline: 1px solid #37ffc4 !important
  thead
    outline: 1px solid #98daca !important
  tbody
    outline: 1px solid #64a7a0 !important
  tfoot
    outline: 1px solid #22746b !important
  tr
    outline: 1px solid #86c0b2 !important
  th
    outline: 1px solid #a1e7d6 !important
  td
    outline: 1px solid #3f5a54 !important
  col
    outline: 1px solid #6c9a8f !important
  colgroup
    outline: 1px solid #6c9a9d !important
  button
    outline: 1px solid #da8301 !important
  datalist
    outline: 1px solid #c06000 !important
  fieldset
    outline: 1px solid #d95100 !important
  form
    outline: 1px solid #d23600 !important
  input
    outline: 1px solid #fca600 !important
  keygen
    outline: 1px solid #b31e00 !important
  label
    outline: 1px solid #ee8900 !important
  legend
    outline: 1px solid #de6d00 !important
  meter
    outline: 1px solid #e8630c !important
  optgroup
    outline: 1px solid #b33600 !important
  option
    outline: 1px solid #ff8a00 !important
  output
    outline: 1px solid #ff9619 !important
  progress
    outline: 1px solid #e57c00 !important
  select
    outline: 1px solid #e26e0f !important
  textarea
    outline: 1px solid #cc5400 !important
  details
    outline: 1px solid #33848f !important
  summary
    outline: 1px solid #60a1a6 !important
  command
    outline: 1px solid #438da1 !important
  menu
    outline: 1px solid #449da6 !important
  del
    outline: 1px solid #bf0000 !important
  ins
    outline: 1px solid #400000 !important
  img
    outline: 1px solid #22746b !important
  iframe
    outline: 1px solid #64a7a0 !important
  embed
    outline: 1px solid #98daca !important
  object
    outline: 1px solid #00cc99 !important
  param
    outline: 1px solid #37ffc4 !important
  video
    outline: 1px solid #6ee866 !important
  audio
    outline: 1px solid #027353 !important
  source
    outline: 1px solid #012426 !important
  canvas
    outline: 1px solid #a2f570 !important
  track
    outline: 1px solid #59a600 !important
  map
    outline: 1px solid #7be500 !important
  area
    outline: 1px solid #305900 !important
  a
    outline: 1px solid #ff62ab !important
  em
    outline: 1px solid #800b41 !important
  strong
    outline: 1px solid #ff1583 !important
  i
    outline: 1px solid #803156 !important
  b
    outline: 1px solid #cc1169 !important
  u
    outline: 1px solid #ff0430 !important
  s
    outline: 1px solid #f805e3 !important
  small
    outline: 1px solid #d107b2 !important
  abbr
    outline: 1px solid #4a0263 !important
  q
    outline: 1px solid #240018 !important
  cite
    outline: 1px solid #64003c !important
  dfn
    outline: 1px solid #b4005a !important
  sub
    outline: 1px solid #dba0c8 !important
  sup
    outline: 1px solid #cc0256 !important
  time
    outline: 1px solid #d6606d !important
  code
    outline: 1px solid #e04251 !important
  kbd
    outline: 1px solid #5e001f !important
  samp
    outline: 1px solid #9c0033 !important
  var
    outline: 1px solid #d90047 !important
  mark
    outline: 1px solid #ff0053 !important
  bdi
    outline: 1px solid #bf3668 !important
  bdo
    outline: 1px solid #6f1400 !important
  ruby
    outline: 1px solid #ff7b93 !important
  rt
    outline: 1px solid #ff2f54 !important
  rp
    outline: 1px solid #803e49 !important
  span
    outline: 1px solid #cc2643 !important
  br
    outline: 1px solid #db687d !important
  wbr
    outline: 1px solid #db175b !important

if nix.debug.depth
  body
    background-color: rgba(17, 34, 99, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  article
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  nav
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  aside
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  section
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  header
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  footer
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  h1
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  h2
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  h3
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  h4
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  h5
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  h6
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  main
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  address
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  div
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  p
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  hr
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  pre
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  blockquote
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  ol
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  ul
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  li
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  dl
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  dt
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  dd
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  figure
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  figcaption
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  table
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  caption
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  thead
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  tbody
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  tfoot
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  tr
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  th
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  td
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  col
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  colgroup
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  button
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  datalist
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  fieldset
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  form
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  input
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  keygen
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  label
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  legend
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  meter
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  optgroup
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  option
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  output
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  progress
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  select
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  textarea
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  details
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  summary
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  command
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  menu
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  del
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  ins
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  img
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  iframe
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  embed
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  object
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  param
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  video
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  audio
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  source
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  canvas
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  track
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  map
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  area
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  a
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  em
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  strong
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  i
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  b
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  u
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  s
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  small
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  abbr
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  q
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  cite
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  dfn
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  sub
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  sup
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  time
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  code
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  kbd
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  samp
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  var
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  mark
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  bdi
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  bdo
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  ruby
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  rt
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  rp
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  span
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  br
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)
  wbr
    background-color: rgba(255, 255, 255, 0.25)
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6)