.docs--debug {
  .panel__content {
    overflow-y: auto;
  }
}

.table--debug {
  width:100%;
  border-collapse:collapse;
  th, td {
    padding:1em;
    border:1px solid $colour-grey-lightmid;
    text-align:left;
  }
  tr:nth-child(odd) td, th {
    background:$colour-grey-xlight;
  }
}

.doc-status {
  display: inline-block;
  font-size: .4em;
  background-color: $colour-grey-lightmid;
  border-radius: 5px;
  padding: 2px 5px;
  vertical-align: super;
  font-weight: lighter;

  &--deprecated {
    color: $colour-red-dark;
    background-color: $colour-red-light;
  }
  &--beta {
    color: $colour-orange-dark;
    background-color: $colour-orange-light;
  }
  &--ready {
    color: $colour-green-dark;
    background-color: $colour-green-light;
  }

  code {
    padding: initial;
    border: none;
    border-radius: 0;
    padding-left: .5em;
  }
}

.columns--debug .columnable--debug {
  column-count: 2;
}

.col-box--debug {
  padding-top: 20px;
  padding-bottom: 20px;
  box-shadow: 1px 2px 4px 0px transparentize($colour-grey-lightmid, 0.1);
  text-align: center;

  code {
    font-size: 12px;
    white-space: normal;
  }
}

pre[class*="language-"], pre[class*="language-"] code[class*="language-"] {
  color:black;
  background:none;
  font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  text-align:left;
  white-space:pre;
  word-spacing:normal;
  word-break:normal;
  word-wrap:normal;
  line-height:1.5;
  tab-size:4;
  hyphens:none;
}

/* Code blocks */
pre[class*="language-"] {
  max-height:300px;
  margin:1em 0;
  border:1px solid $colour-grey-lightmid;
  border-left:5px solid $colour-blue;
  background-color:#fdfdfd;
  background-image:linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%);
  background-size:3em 3em;
  background-origin:content-box;
  overflow:scroll;
  padding:0;
}

pre[class*="language-"] code[class*="language"] {
  padding:1.5em 1em;
  display:block;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
  background-color:#fdfdfd;
  box-sizing:border-box;
}

/* Inline code */
:not(pre) > code {
  padding:0.2em;
  border-radius:0.3em;
  color:#c92c2c;
  border:1px solid rgba(0, 0, 0, 0.1);
  display:inline;
  white-space:nowrap;
}

.token.comment,
.token.block-comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color:#7D8B99;
}

.token.punctuation {
  color:#5F6364;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.function-name,
.token.constant,
.token.symbol,
.token.deleted {
  color:#c92c2c;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.function,
.token.builtin,
.token.inserted {
  color:#2f9c0a;
}

.token.operator,
.token.entity,
.token.url,
.token.variable {
  color:#a67f59;
  background:rgba(255, 255, 255, 0.5);
}

.token.atrule,
.token.attr-value,
.token.keyword,
.token.class-name {
  color:#1990b8;
}

.token.regex,
.token.important {
  color:#e90;
}

.language-css .token.string,
.style .token.string {
  color:#a67f59;
  background:rgba(255, 255, 255, 0.5);
}

.token.important {
  font-weight:normal;
}

.token.bold {
  font-weight:bold;
}
.token.italic {
  font-style:italic;
}

.token.entity {
  cursor:help;
}

.namespace {
  opacity:0.7;
}

/* Plugin styles */
.token.tab:not(:empty):before,
.token.cr:before,
.token.lf:before {
  color:#e0d7d1;
}

/* Line numbers */
pre[class*="language-"].line-numbers {
  padding-left:0;
}

pre[class*="language-"].line-numbers code {
  padding-left:3.8em;
}

pre[class*="language-"].line-numbers .line-numbers-rows {
  left:0;
}

/* Line highlight */
pre[class*="language-"][data-line] {
  padding-top:0;
  padding-bottom:0;
  padding-left:0;
}
pre[data-line] code {
  position:relative;
  padding-left:4em;
}
pre .line-highlight {
  margin-top:0;
}