/* ------------------------------------------------------------------------ *\
   mixins.component.debug
\* ------------------------------------------------------------------------ */


/**
 * [debug description]
 * @return {[type]} [description]
 */
c-debug()
  position: relative
  display: block
  margin: 0
  padding: 0 20px
  width: 100%
  color: white
  text-align: center

  if !nix.debug.mq
    display: none

  // else
  //   +u-mq--max("sm")
  //     text-align: center


/**
 * [debug__heading description]
 * @return {[type]} [description]
 */
c-debug__heading()
  color: nix.skin.color.white
  font-size: 18px


/**
 * [debug__close description]
 * @return {[type]} [description]
 */
c-debug__close()
  u-position(absolute 0 5px auto auto)
  display: block
  line-height: 1.5

  .icon
    color: nix.skin.color.white


/**
 * [create description]
 * @param  {[type]} selector [description]
 * @return {[type]}          [description]
 */
c-debug--create(selector)
  [{selector}~="--xxs"]
    background: nix.palette.orange.light--30

  [{selector}~="--xs"]
    background: nix.palette.orange.light--20

  [{selector}~="--sm"]
    background: nix.palette.orange.light--10

  [{selector}~="--md"]
    background: nix.palette.orange.core

  [{selector}~="--lg"]
    background: nix.palette.orange.dark--10

  [{selector}~="--xl"]
    background: nix.palette.orange.dark--20

  [{selector}~="--xxl"]
    background: nix.palette.orange.dark--30