//html.sass .mixin-source .scss, html.scss .mixin-source .sass { @extend .hide;}
.mixin-source, .example-source {
  position: relative; @extend .fixed-font;
  .syntaxhighlighter, pre {
  &.scss, &.sass, &.css, &.haml, &.html { display: none; } } }

html.sass { .mixin-source .syntaxhighlighter.sass, .example-source .syntaxhighlighter.sass { display: block; } }
html.scss { .mixin-source .syntaxhighlighter.scss, .example-source .syntaxhighlighter.scss { display: block; } }
html.css .example-source .syntaxhighlighter.css { display: block; }
html.html .example-source .syntaxhighlighter.html { display: block; }
html.haml .example-source .syntaxhighlighter.haml { display: block; }



.mixin-source { display: none; }

html.light .syntaxhighlighter, html.dark .syntaxhighlighter {
  margin: 0 0 2px;
  code { padding: 0; }
  //font-size: 1.1em;
  text-shadow: none;
  .code-block { background: none; @extend .clear-box-shadow; }
  table td.gutter { .line { &:first-child { padding-top: 10px !important; } &:last-child { padding-bottom: 10px !important; } } }
  .toolbar { display: none; }
  //a.help { font-size: 1.5em; @extend .pictos; color: #aaa; position: relative; right: 6px; top: 2px; }
  }

a[rel="github-source"] {
  position: relative;
  float: right;
  top: 1.1em;
}

pre {
  margin: 1.5em 0;
  overflow: auto;
  .code-block:first-child { padding: .6em; display: block; }
  .code-block:first-child { width: 100%; @include box-sizing(border-box); overflow: auto; }
}

.code-block { @extend .round-corners-4; @extend .fixed-font;
  display: inline-block;
  font-size: .95em;
  padding: 0 .4em;
  line-height: 1.5em;
}

.source-documentation {
  @extend .round-corners-4;
  padding: 10px 15px;
  @include round-bottom-corners
}

h3 { @include round-corners;
  padding: 10px 15px;
  margin: 20px 0 20px;
  font-weight: bold;
  position: relative;
  a { text-decoration: none;}
  code, .arg { font-weight: normal; }
}
h3.mixin { @include round-top-corners; margin-bottom: 2px;}
.arg {
  display: inline-block;
  padding: 0 2px;
  &[data-default-value] {
    font-style: italic;
    &:before { content: "[" ; }
    &:after { content: "]" ; }}
}

a[rel="view source"]{ float: right; padding: 9px 15px; margin-top: 20px; position: relative; z-index: 2; font-size: .8em; @include hover-link;}
h2 + a[rel="view source"]{ margin-top: 6px;}

.syntaxhighlighter {
  a, div, code, table, table td, table tr, table tbody, table thead, table caption, textarea {
    background: none; border: 0; bottom: auto; float: none; height: auto; left: auto; line-height: 1.2em !important;
    padding: 0; margin: 0; outline: 0;
    overflow: visible; position: static; right: auto;
    text-align: left; top: auto; vertical-align: baseline;
    width: auto;
    font: { weight: normal; style: normal;
      size: 1em;
    }
    min: { height: inherit; }
  }
}

.syntaxhighlighter { width: 100%; margin: 1em 0 1em 0; position: relative; overflow: auto; font-size: 1em;

  // set up bold and italic
  .bold { font-weight: bold; }
  .italic { font-style: italic; }
  .line { white-space: pre; }

  // main table and columns
  table { width: 100%;
    td.code { width: 100%;
      .line { padding: 0 .6em; } }
    td.gutter .line { text-align: right; padding: 0 0.8em 0 1em; } } // middle spacing between line numbers and lines

  // Styles for the toolbar
  .toolbar { position: absolute; right: 1px; top: 1px; width: 11px; height: 11px; font-size: 10px; z-index: 10;
    span.title { display: inline; }
    a { display: block; text-align: center; text-decoration: none; padding-top: 1px; } }
  .container { position: relative; }
  textarea { @include stretch(0, .65em, 0, .65em); @extend .fixed-font; font-size: .95em; line-height: 1.3em !important;}
}
.syntaxhighlighter, pre .code-block:first-child, pre {
  &::-webkit-scrollbar { height: 12px; }
  &::-webkit-scrollbar-button { &:start:decrement, &:end:increment { display: block; width: 0; height: 0; } }
  &::-webkit-scrollbar-thumb:horizontal { -webkit-border-radius: 5px; -webkit-background-clip: padding-box; }
}