code, pre {
  padding: 7px;
  font-size: $code-font-size;
  font-family: $code-font-family;
  background: $code-background;
}

code {
  padding: 3px 5px;
  border-radius: 4px;
  color: $code-color;
}

.highlight {
  margin: 1em 0;
  border-radius: 5px;
  overflow-x: auto;
  box-shadow: 1px 1px 2px rgba(0,0,0,0.125);
  position: relative;

  table {
    position: relative;

    &::after {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      padding: 2px 7px;
      font-size: $code-font-size;
      font-weight: bold;
      color: darken($gray, 10%);
      background: darken($code-background, 3%);
      content: 'Code';
    }
  }

  @each $sign, $text in $code-type-list {
    &.#{$sign} > table::after {
      content: $text;
    }

    &.#{$sign} > figcaption > span::after {
      content: ' · ' + $text;
    }

    &.#{$sign} figcaption + table {
      &::after {
        display: none;
      }
    }
  }

  figcaption {
    position: absolute;
    top: 0;
    width: 100%;
    padding: 2px 7px;
    font-size: $code-font-size;
    font-weight: bold;
    color: darken($gray, 10%);
    background: darken($code-background, 3%);
    z-index: 20;
    overflow-x: hidden;
    box-sizing: border-box;

    & > a {
      position: absolute;
      right: 0;
      display: inline-box;
      margin-right: 7px;
      font-weight: 400;

      &:hover {
        text-decoration: none;
        border: 0;
      }
    }
  }

  .code {
    pre {
      margin: 0;
      padding: 30px 10px 10px;
    }
  }

  .gutter {
    width: 10px;
    color: $gray;

    pre {
      margin: 0;
      padding: 30px 7px 10px;
    }
  }

  .line {
    // Fix code block null line height and
    // Synchronous gutter and code line highly.
    height: round($code-font-size * 1.5);
  }

  table, tr, td {
    margin: 0;
    padding: 0;
    width: 100%;
    border-collapse: collapse;
  }

  .code {
    .hljs-comment,
    .hljs-quote {
      color: map-get($code-highlight-color, comment);
    }

    .hljs-keyword,
    .hljs-selector-tag,
    .hljs-addition {
      color: map-get($code-highlight-color, keyword);
    }

    .hljs-number,
    .hljs-string,
    .hljs-meta .hljs-meta-string,
    .hljs-literal,
    .hljs-doctag,
    .hljs-regexp {
      color: map-get($code-highlight-color, number);
    }

    .hljs-title,
    .hljs-section,
    .hljs-name,
    .hljs-selector-id,
    .hljs-selector-class {
      color: map-get($code-highlight-color, title);
    }

    .hljs-attribute,
    .hljs-attr,
    .hljs-variable,
    .hljs-template-variable,
    .hljs-class .hljs-title,
    .hljs-type {
      color: map-get($code-highlight-color, attribute);
    }

    .hljs-symbol,
    .hljs-bullet,
    .hljs-subst,
    .hljs-meta,
    .hljs-meta .hljs-keyword,
    .hljs-selector-attr,
    .hljs-selector-pseudo,
    .hljs-link {
      color: map-get($code-highlight-color, symbol);
    }

    .hljs-built_in,
    .hljs-deletion {
      color: map-get($code-highlight-color, built_in);
    }

    .hljs-formula {
      background: map-get($code-highlight-color, formula);
    }
    
    .hljs-emphasis {
      font-style: italic;
    }
    
    .hljs-strong {
      font-weight: bold;
    }
  }
}