@mixin site-theme($theme, $page-bg, $text, $strong-text, $heading, $link, $search, $search-bg, $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; } }
  #wrap { @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}; background-color: rgba($search-bg, .2); color: $search;}}
  
  aside { @extend .vertical-rule-#{$theme};
    h2 { @extend .horizontal-rule-#{$theme};
      a { color: $text; } } }
  
  #version { background: rgba($version-text, .03); color: rgba($version-text, .4); border: 1px solid rgba($version-border, .3); border-top: 0;
    a { @include hover-link; color: rgba($version-text, .7); } }
  
  #page > article {
    #{headings()}{ color: $heading; } }
    h1, h2 { @extend .horizontal-rule-#{$theme}; }
}

// Dark theme
.inset-panel-dark {
  @include background-image(linear-gradient(rgba(#000, .5), rgba(#000, 0)));
  @include single-box-shadow(rgba(#fff, .1), 0, 1px, 0);
  background-color: rgba(#000, .2); }
  
.horizontal-rule-dark {  
  @include single-box-shadow(rgba(#fff, .07), 0, 1px, 0);
  border-bottom: 1px solid #121212; }
  
.vertical-rule-dark {
  @include single-box-shadow(rgba(#fff, .07), 1px, 0, 0);
  border-right: 1px solid #121212; }
  
.code-block-dark { @extend .round-corners-4; @extend .inset-panel-dark;
  display: inline-block;
  padding-left: 2px;
  padding-right: 2px; }

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

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

  $search: #6e6e6e;
  $search-bg: black;

  $link: #dadbb1;
  $nav-link: #bfbfbf;

  $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, $search, $search-bg, $nav-link, $main-nav, $main-nav-selected, $docs-nav-selected, $module-nav-selected, $version-text, $version-border);
}

html.dark { @include dark-theme; }