/*
 * Sidebar
 *
 * Flexible banner for housing site name, intro, and "footer" content. Starts
 * out above content in mobile and later moves to the side with wider viewports.
 */

.sidebar {
  // color: rgba(255,255,255,.75);
  // text-align: left;

  &::before {
    /* make sidebar slightly darker to increase text readability (when using a background image) */
    // content: "";
    // position: absolute;
    // z-index: 2;
    // top: 0;
    // left: 0;
    // bottom: 0;
    // right: 0;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#202020+0,202020+100&0+0,0.5+100 */
    background: -moz-linear-gradient(top, rgba(32,32,32,0) 0%, rgba(32,32,32,0.5) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(32,32,32,0) 0%,rgba(32,32,32,0.5) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(32,32,32,0) 0%,rgba(32,32,32,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00202020', endColorstr='#80202020',GradientType=0 ); /* IE6-9 */
  }

  /* Sidebar links */
  a {
    // color: #fff;
    // border-bottom-color: rgba(255, 255, 255, 0.2);

    &:hover, &:focus {
      border-bottom-color: #fff;
    }
  }
}

// #_yDrawer {
//   position: relative;
//
//   @media screen {
//     padding: 2rem 1rem;
//     min-height: 640px; // fallback
//     min-height: 100vh;
//   }
//
//   @media screen and (min-width: $break-point-2) {
//     position: fixed;
//     top: 0;
//     left: 0;
//     bottom: 0;
//     width: 18rem; // duplicate!
//     margin-left: 0;
//   }
//
//   @media screen and (min-width: $break-point-dynamic) {
//     width: $dynamic-width;
//   }
//
//   &.loaded {
//     min-height: 0;
//     padding: 0;
//   }
// }
//
// .sidebar-bg {
//   position: absolute;
//   top: 0;
//   right: 0;
//   bottom: 0;
//   left: 0;
//   background: #202020 center / cover;
// }
//
// .sidebar-sticky {
//   position: relative;
//   z-index: 3;
//
//   @media screen {
//     position: absolute;
//     right:  1rem;
//     bottom: 1rem;
//     left:   1rem;
//   }
// }
//
// /* About section */
// .sidebar-about > h1 {
//   color: #fff;
//   font-size: 2rem;
// }
//
// .sidebar-nav > ul {
//   list-style: none;
//   padding-left: 0;
//
//   > li:last-child > .sidebar-nav-item {
//     border-bottom: 1px solid rgba(255, 255, 255, 0.2);
//   }
// }
//
a.sidebar-nav-item {
  // font-weight: bold;
  // display: block;
  // line-height: 1.75;
  // margin: 0 -2rem;
  // padding: .25rem 2rem;
  // border-top: 1px solid rgba(255, 255, 255, 0.2);
  // border-bottom: none;
  transition: background-color 500ms ease;

  &:hover, &:focus {
    border-bottom: none;
    background-color: rgba(255, 255, 255, 0.1);
    transition: background-color 50ms ease-out;
  }
}

@media print {
  .sidebar {
    page-break-inside: avoid;
  }

  .sidebar-nav, .sidebar-social {
    display: none;
  }
}