// Common

$sidebar:#253a4c;
$sidebar-nav: #0c2438;
$headerHeight: 60px;

html {
  height: 100%;
  background: $sidebar;
}

body {
  height: 100%;
}

p {
  line-height: 18px;
}

.main {
  min-height: 100%;
  background: $pageBg;
  overflow: hidden;

  h1, h2 {
    .anchor-link {
      color: $grayLight;
      text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.7);
      &:hover {
        color: $gray;
      }
    }
  }

  blockquote {
    padding:0 0 0 15px;
    border-left:5px solid $borderColor;
  }
  .gr-zebra .gu:nth-child(even) {
    background-color: mix(#ffffff, $blue4, 10%);
    color:#fff;
  }
  .gr-zebra .gu:nth-child(odd) {
    background-color: mix(#ffffff, $blue4, 30%);
    color:#fff;
  }
  .category {
    border-bottom:1px dotted mix(#000000, $borderColor, 10%);
  }
}

.header {
  background: $white;
  min-height: $headerHeight;
  line-height: $headerHeight;
}

.toggle-mode {
  line-height: 16px;
}

.nav-doc {
  text-transform: uppercase;
  li {
    a {
      color:lighten($gray,5%);
      text-decoration: none;
    }
    &.active,&:hover {
      a {
        color:$black;
      }
    }
  }
}

.sidebar {
  min-height: 100%;
  background: $sidebar;
  h1 {
    height:$headerHeight;
    line-height:$headerHeight - 2;
  }
  img {
    max-width: 200px;
  }
  .follow-github {
    svg {
      position:relative;
      top:2px;
      left: 3px;
    }
    path {
      fill: lighten($white, 10%);
    }
  }
}

.sidebar-nav {
  background: $sidebar-nav;
  a {
    color: $white;
    text-decoration: none;
    line-height:18px;
    &:hover {
      color:$orange1;
    }
  }
  li {
    padding-top:5px;
    a {
      padding:0 0 0 5px;
      line-height: 1;
      display:block;
    }
    > ul {
      display: none;
      > li {

      }
    }
  }
  li.active {
    > a {
      color:$orange1;
      border-left:2px solid $orange1;
    }
    ul {
      display: block;
    }
  }
}

.code-content {

  margin:10px 0 20px 0;
  &.visible {
    pre, .copy-code  {
      display:block;
    }
    .toggle-code {
      .show {
        display:none;
      }
      .hide {
        display:block;
      }
    }
  }

  i.last {
    position:relative;
    left:-14px;
  }

  .toggle-code {
    & + pre {
      margin:0 !important;
    }
    .show, .hide {
      display: block;
    }
    .show {
      display:block;
    }
    .hide {
      display:none;
    }
  }

  .copy-code {
    background:#f5f2f0;
    padding:15px;
    display:none;
  }

  pre {
    display:none;
  }
}

.affix-top {
  position: static;
}

.affix {
  position: fixed; /* Undo the static from mobile first approach */
  top: 0;
  z-index: 1000;
}

.headings-content {
  .main-headings {
    pre {
      padding:0;
      background:none;
    }
  }
}

.affix-sidebar {
}
.affix-nav {
  left:20%;
  .rtl & {
    left:auto;
    right:20%;
  }
}
.main {
  margin-top: $headerHeight;
  margin-left:20%;
  .rtl & {
    margin-left:auto;
    margin-right:20%;
  }
  .fluid-container {
    max-width: 95%;
    width:auto;
  }
}


.icons-overview-content {
  .icon .vicon {
    color:$grayDark;
    font-size:1.3em;
  }
}

.colors-content {
  pre {
    margin:0;
    background:#fff;
  }
  .bg {
    height:60px;
  }
  .colors-less-content {
    pre {
      padding:5px;
    }
    .bg {
      height:40px;
    }
  }
}

.popins-content {
  .popin-container {
    position: static;
    .popin {
      margin:0;
    }
  }
}