// *************************************
//
//   Sidebar
//   -> Sidebar
//
// -------------------------------------
//   Template (Haml)
// -------------------------------------
//
// .sidebar
//
// *************************************

.sidebar {
  overflow: auto;
  height: 100%;
  padding-right: 15px;
  padding-bottom: 15px;
  width: map-get($component-widths, sidebar) + 15px;

  &-wrapper {
    -webkit-overflow-scrolling: touch;
    background-color: $c-background-sidebar;
    left: 0;
    height: 100%;
    overflow-y: hidden;
    position: fixed;
    top: 0;
    width: map-get($component-widths, sidebar) + 15px;
    z-index: map-get($z-index, sidebar);
  }

  &-branding {
    width: 160px;
    padding: 0;
    margin: 16px auto;
  }
}