@mixin site-theme($theme, $page-bg, $text, $strong-text, $heading, $link, $code, $search, $nav-link, $main-nav, $main-nav-selected, $option-panel-border, $option-panel-bg){
  background: $page-bg;
  body { background: $page-bg; color: $text;
    a { color: $link; } }

  #page { @extend .horizontal-rule-#{$theme}; }
  header { @extend .horizontal-rule-#{$theme}; border-width: 4px; }

  nav a { color: $nav-link; }
  #main-nav a { color: $main-nav;}

  body#home #main-nav a[rel=home],
  body#help #main-nav a[rel=help],
  body.tutorial #main-nav a[rel=help],
  body.reference #main-nav a[rel=documentation],
  body#changelog #main-nav a[rel=documentation],
  body.demo #main-nav a[rel=documentation],
  body#get-involved #main-nav a[rel=get-involved]{ color: $main-nav-selected; }

  #search-docs input {
    @extend .inset-panel-#{$theme}; color: $search;
    &::-webkit-input-placeholder { color: $search; } }
  #{headings()}{ color: $heading;
    strong { color: $main-nav-selected; }
    em { color: $code; } }

  #page > article h2 { @extend .horizontal-rule-top-#{$theme}; }
  hr { @extend .horizontal-rule-#{$theme};
    border-bottom-width: 8px}
  body#home h2 { @extend .horizontal-rule-#{$theme}; }

  #page aside + article { @extend .vertical-rule-left-#{$theme}; }

  aside {
    h2 a { color: $strong-text; }
    h2, h3 { @extend .horizontal-rule-#{$theme}; }}

  footer .links li { @extend .vertical-rule-#{$theme}; }
  code { @extend .code-block-#{$theme}; color: $code; }

  #theme_pref { @extend .theme-switch-#{$theme}; }
  #docs_panel div, .syntax_pref { background: $option-panel-bg; border-color: $option-panel-border; }

  body#home .overview div { @extend .inset-panel-#{$theme};
    h4 { @extend .horizontal-rule-#{$theme}; } }
  #featured_sites li { @extend .inset-panel-#{$theme}; }

}
@mixin docs-theme($theme, $heading, $code, $nav-link, $docs-nav-selected, $module-nav-selected){

  #page > article {
    h1 { @extend .horizontal-rule-#{$theme}; }
    h2 { @extend .horizontal-rule-top-#{$theme}; }
    h3 { @extend .heading-panel-#{$theme}; }
    h1 + h2, hr + h2 {
      @extend .clear-box-shadow; border-top: 0;
    margin-top: 0;}
  }

  #sub-nav { @extend .horizontal-rule-#{$theme}; }
  #docs-nav { @extend .vertical-rule-#{$theme}; }
  body.core a[rel=core], body.blueprint a[rel=blueprint]{ @extend .inset-panel-#{$theme}; color: $docs-nav-selected; @extend .round-corners-4;}
  #main-nav a[rel=home] { @include replace-text-with-dimensions("compass-logo-small-#{$theme}.png"); display: inline-block; float: left; }

  #module-nav {
    ul { overflow: visible; }}
  body.getting-started #module-nav li.getting-started,
  body.tutorial #module-nav li.tutorials,
  body.support #module-nav li.support,
  #module-nav li.selected { @extend .selected-marker-#{$theme};
    a { color: $module-nav-selected; } }

  a[rel=sass], a[rel=scss], a[rel=css], a[rel=html], a[rel=haml] { @extend .syntax-switch-#{$theme}; }
  &.sass a[rel=sass], &.scss a[rel=scss], &.css a[rel=css], &.html a[rel=html], &.haml a[rel=haml] { color: $heading; color: rgba($heading, .7); @extend .round-corners-em; @extend .inset-panel-#{$theme}; }

  #version { color: rgba($heading, .3); a { color: rgba($nav-link, .7); } }
  .mixin-source, .example-source, .function-source { @extend .mixin-panel-#{$theme};
    .container textarea { color: $code; }
  }
  h2 a.help { color: $heading;}

  .source-documentation { @extend .doc-panel-#{$theme}; }

  #demo { @extend .demo-#{$theme}; }

  .arg { color: $code; }
  .arg[data-default-value] { color: rgba($code, .7); }
  a[rel="view source"]{ color: rgba($heading, .5); &:hover{ color: rgba($heading, .8);} }

}

// Dark theme
.inset-panel-dark {
  @include box-shadow(rgba(#fff, .1) 0 1px 0, rgba(#000, .8) 0 1px 7px 0px inset);
  background: darken(#2f2f2f, 6); background-color: rgba(#000, .3); }

.horizontal-rule-dark {
  @include box-shadow(rgba(#fff, .07) 0 1px 0);
  border-bottom: 1px solid #121212; }

.horizontal-rule-top-dark {
  @include box-shadow(rgba(#fff, .07) 0 1px 0 inset);
  border-top: 1px solid #121212; }

.vertical-rule-dark {
  @include box-shadow(rgba(#fff, .07) 1px 0 0);
  border-right: 1px solid #121212; }

.vertical-rule-left-dark {
  @include box-shadow(rgba(#fff, .07) 1px 0 0 inset);
  border-left: 1px solid #121212; }

.code-block-dark { @extend .code-block; @extend .inset-panel-dark; }

.demo-dark {
  @include box-shadow(rgba(#000, .5) 0 2px 10px inset, rgba(#fff, .3) 0 1px 2px 0px, rgba(#000, .8) 0 0 0 1px inset); }

.heading-panel-dark {
  background: darken(#2f2f2f, 6);
  background: rgba(#000, .2);
  @include box-shadow(rgba(#000, .2) 0 0 0 1px inset);
  a:hover { color: #fff;
    .arg { color: rgba(#fff, .6);}
  }
}
.doc-panel-dark {
  background: darken(#2f2f2f, 4);
  background: rgba(#000, .1);
  @include box-shadow(rgba(#000, .2) 0 0 0 1px inset);
}

.syntax-switch-dark {
  color: #000; text-shadow: rgba(#fff, .08) 0 1px 0;
  &:hover { color: #fff; text-shadow: #000 0 1px 0; } }

.theme-switch-dark {
  cursor: pointer;
  a { color: #000; color: rgba(#000, .8); text-shadow: rgba(#fff, .08) 0 1px 0; }
  &:hover a { color: #eee; text-shadow: #000 0 1px 0; } }

.selected-marker-dark {
  a:before{ border-bottom-color: #121212; }
  &:before { border-bottom-color: #414141; }
  &:after { border-bottom-color: #323232; }
}
.mixin-panel-dark {
  @extend .inset-panel-dark;
  td.gutter { background: rgba(#fff, .05); .line { border-right: 2px solid rgba(#fff, .15); color: rgba(#fff, .5); }}
  .container textarea { background: darken(#2f2f2f, 6); }
}

@mixin dark-theme($docs: false) {
  $page-bg: #2f2f2f;

  $text: #c6c6c6;
  $heading: white;
  $strong-text: #dbdbdb;

  $search: #6e6e6e;

  $code: #dadbb1;
  $nav-link: #bfbfbf;
  $link: saturate(lighten(#85AFC9, 4), 19);

  $main-nav: white;
  $main-nav-selected: #fb292d;
  $docs-nav-selected: $strong-text;
  $module-nav-selected: $link;

  $option-panel-border: rgba(#000, .5);
  $option-panel-bg: rgba(#fff, .06);

  @include site-theme(dark, $page-bg, $text, $strong-text, $heading, $link, $code, $search, $nav-link, $main-nav, $main-nav-selected, $option-panel-border, $option-panel-bg);

  @if($docs){
    @include docs-theme(dark, $heading, $code, $nav-link, $docs-nav-selected, $module-nav-selected);
    .syntaxhighlighter, pre, pre .code-block:first-child {
      &::-webkit-scrollbar-track-piece { -webkit-box-shadow: rgba(#000, .5) 0 0 3px 1px inset; background: rgba(#000, .2); }
    }
    .syntaxhighlighter, pre, pre .code-block:first-child {
      &::-webkit-scrollbar-thumb:horizontal { background: -webkit(linear-gradient(rgba(#fff, .3), rgba(#fff, 0))) #000; -webkit-box-shadow: rgba(black, 0.8) 0px 0 0 1px inset; }
    }
  }
}

// Light Theme
.inset-panel-light {
  @include box-shadow(rgba(#fff, 1) 0 1px 0, rgba(#000, .5) 0 1px 3px 0px inset);
  text-shadow: 0 1px 1px #fff;
  background: darken(#fff, .04); background-color: rgba(#000, .04); }

.horizontal-rule-light {
  @include box-shadow(#fff 0 1px 0);
  border-bottom: 1px solid #bbb; }

.horizontal-rule-top-light {
  @include box-shadow(#fff 0 1px 0 inset);
  border-top: 1px solid #bbb; }

.vertical-rule-light {
  @include single-box-shadow(rgba(#fff, 1), 1px, 0, 0);
  border-right: 1px solid #bbb; }

.vertical-rule-left-light {
  @include single-box-shadow(rgba(#fff, 1), 1px, 0, 0 inset);
  border-left: 1px solid #bbb; }

.code-block-light { @extend .code-block; @extend .inset-panel-light; background: rgba(#fff, .5); }

.demo-light { @include box-shadow(rgba(#000, .3) 0 2px 10px inset, #fff 0 1px 2px 0px, rgba(#000, .05) 0 0 0 1px inset); }

.syntax-switch-light {
  color: rgba(#000, .3); text-shadow: rgba(#fff, .08) 0 1px 0;
  &:hover { color: #000; text-shadow: #fff 0 1px 0; }}

.theme-switch-light {
  cursor: pointer;
  a {color: rgba(#000, .2); text-shadow: rgba(#fff, 1) 0 1px 0;}
  &:hover a { color: #000; } }

.heading-panel-light {
  background: rgba(#fff, .5);
  @include box-shadow(rgba(#000, .13) 0 0 0 1px inset);
  a:hover { color: #000;
    .arg { color: rgba(#000, .6); } }
}

.selected-marker-light {
  a:before{ border-bottom-color: #bbbbbb; }
  &:before { border-bottom-color: #fff; }
  &:after { border-bottom-color: #e5e5e5; }
}

.doc-panel-light {
  background: rgba(#000, .03);
  text-shadow: rgba(#fff, .9) 0 1px 1px;
  @include box-shadow(rgba(#000, .15) 0 0 0 1px inset);
}

.mixin-panel-light {
  @extend .inset-panel-light;
  background: rgba(#fff, .8);
  td.gutter { background: rgba(#000, .08); .line { border-right: 2px solid rgba(#000, .2); color: rgba(#000, .4); } }
  .container textarea { background: darken(#fff, .04); }
}

@mixin light-theme($docs: false) {
  $page-bg: #ececec; // image-url('bg-light.jpg');

  $text: #111;
  $heading: #222;
  $strong-text: #000;

  $search: #666;

  $link: #307eb6;
  $nav-link: #444;
  $code: #222;

  $main-nav: #000;
  $main-nav-selected: darken(#fb292d, 15);
  $docs-nav-selected: $strong-text;
  $module-nav-selected: $link;

  $option-panel-border: rgba(#000, .2);
  $option-panel-bg: #fff;

  @include site-theme(light, $page-bg, $text, $strong-text, $heading, $link, $code, $search, $nav-link, $main-nav, $main-nav-selected, $option-panel-border, $option-panel-bg);

  @if($docs){
    @include docs-theme(light, $heading, $code, $nav-link, $docs-nav-selected, $module-nav-selected);
    .syntaxhighlighter::-webkit-scrollbar-track-piece { -webkit-box-shadow: rgba(#000, .3) 0 0 3px 1px inset; background: rgba(#ddd, .8); }
    .syntaxhighlighter::-webkit-scrollbar-thumb:horizontal { background: -webkit(linear-gradient(rgba(#000, 0) 40%, rgba(#000, .2))) #fff; -webkit-box-shadow: rgba(black, 0.2) 0px 0 0 1px inset; }
  }
}