/*
 * 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;
  padding: 1rem 0;

  @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;
  }

  @media screen {
    &.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;
  padding-left:  1rem;
  padding-right: 1rem;
  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;
  // }
}

// @media print {
//   .sidebar {
//     page-break-inside: avoid;
//   }
//
//   .sidebar-nav, .sidebar-social {
//     display: none;
//   }
// }