@mixin site-theme($theme, $page-bg, $text, $strong-text, $heading, $link, $code, $search, $nav-link, $main-nav, $main-nav-selected, $docs-nav-selected, $module-nav-selected, $version-text, $version-border){
  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.docs #main-nav a[rel=documentation],
  body.get-involved #main-nav a[rel=get-involved]{ color: $main-nav-selected; }
  
  #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;}
  #module-nav .selected { color: $module-nav-selected; }
  
  #search-docs {
    input::-webkit-input-placeholder { color: $search; }
    input { @extend .inset-panel-#{$theme}; color: $search;}}
  
  aside { @extend .vertical-rule-#{$theme};
    h2 { @extend .horizontal-rule-#{$theme};
      a { color: $strong-text; } } }
  
  #docs_panel > div { background: rgba($version-text, .03); color: rgba($version-text, .4); border: 1px solid rgba($version-border, .3); border-top: 0; @include round-bottom-corners;
    a { text-decoration: none; color: rgba($version-text, .7); }
    a[rel=theme] { color: rgba($version-border, .8); text-shadow: rgba($version-text, .08) 0 1px 0; &:hover { text-decoration: none; color: $strong-text; text-shadow: $version-border 0 1px 0; } } 
    a[rel=sass], a[rel=scss] { color: rgba($version-border, .6); text-shadow: rgba($version-text, .08) 0 1px 0;} }
  body.sass #docs_panel a[rel=sass], body.scss #docs_panel a[rel=scss] { color: rgba($version-text, .5); @include border-radius(1em); @extend .inset-panel-#{$theme};}
  
  #page > article {
    #{headings()}{ color: $heading; } }
    h1, h2 { @extend .horizontal-rule-#{$theme}; }
    h3 {
      background: rgba(#000, .2);
      @include box-shadow(rgba(#000, .2) 0 0 0 1px inset);
      a:hover { color: $heading;
        .arg { color: rgba($heading, .6);}
      }
    }
  footer .links li { @extend .vertical-rule-#{$theme}; }
  
  code { @extend .code-block-#{$theme}; color: $code;}
  .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-color: rgba(#000, .3); }
  
.horizontal-rule-dark {  
  @include box-shadow(rgba(#fff, .07) 0 1px 0);
  border-bottom: 1px solid #121212; }
  
.vertical-rule-dark {
  @include box-shadow(rgba(#fff, .07) 1px 0 0);
  border-right: 1px solid #121212; }
  
.code-block-dark { @extend .code-block; @extend .inset-panel-dark; }

@mixin dark-theme {
  $page-bg: #343434;

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

  $search: #6e6e6e;
  
  $link: #dadbb1;
  $nav-link: #bfbfbf;
  $code: #85AFC9;

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

  $version-text: white;
  $version-border: black;

  @include site-theme(dark, $page-bg, $text, $strong-text, $heading, $link, $code, $search, $nav-link, $main-nav, $main-nav-selected, $docs-nav-selected, $module-nav-selected, $version-text, $version-border);
}

// Light Theme
.inset-panel-light {
  @include background-image(linear-gradient(rgba(#000, .15), rgba(#000, 0)));
  @include box-shadow(rgba(#fff, 1) 0 1px 0, rgba(#000, .25) 0 -1px 0);
  background-color: rgba(#fff, .2); }
  
.horizontal-rule-light {  
  @include single-box-shadow(rgba(#fff, 1), 0, 1px, 0);
  border-bottom: 1px solid #bbb; }
  
.vertical-rule-light {
  @include single-box-shadow(rgba(#fff, 1), 1px, 0, 0);
  border-right: 1px solid #bbb; }
  
.code-block-light { @extend .code-block;
  //@include background-image(linear-gradient(rgba(#000, .1), rgba(#000, 0)));
  @include box-shadow(rgba(#000, .2) 0 0 1px 1px inset);
  background-color: rgba(#fff, 1);}

@mixin light-theme {
  $page-bg: #eaeaea;

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

  $search: #666;
  $search-bg: white;

  $link: darken(adjust-hue(#dadbb1, 160), 40);
  $nav-link: #444;

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

  $version-text: black;
  $version-border: white;
  $code: #222;

  @include site-theme(light, $page-bg, $text, $strong-text, $heading, $link, $code, $search, $nav-link, $main-nav, $main-nav-selected, $docs-nav-selected, $module-nav-selected, $version-text, $version-border);
}

html.dark { @include dark-theme; }
html.light { @include light-theme; }