.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  width: var(--sidebar-width);
  left: calc(0px - var(--sidebar-width));
  visibility: hidden;
  overflow-y: auto;
  font-family: "PT Sans", Helvetica, Arial, sans-serif;
  color: var(--sidebar-color);
  background-color: var(--sidebar-bg);
  -webkit-transition: all .3s ease-in-out;
          transition: all .3s ease-in-out;
}
@media (max-width: $md-screen) {
  .sidebar {
    font-size: .8em;
  }
}

.sidebar a {
  color: var(--oc-white);
}

.sidebar p {
  margin: 0;
}

.sidebar-item {
  padding: var(--spacer-2);
}

.sidebar-nav {
  border-bottom: 1px solid var(--border-color);
}
.sidebar-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sidebar-nav-item {
  display: block;
  padding: var(--spacer) var(--spacer-2);
  border-top: 1px solid var(--border-color);
}
.sidebar-nav-item.active,
a.sidebar-nav-item:hover,
a.sidebar-nav-item:focus {
  text-decoration: none;
  background-color: rgba(255,255,255,.1);
  border-color: transparent;
}

a.social-icon {
  margin-right: .5em;
  text-decoration: none;
}

.sidebar-checkbox {
  position: absolute;
  opacity: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.sidebar-toggle {
  position: absolute;
  top: var(--spacer);
  left: var(--spacer);
  display: flex;
}

.sidebar-toggle::before {
  display: inline-block;
  width: 32px;
  height: 32px;
  content: "";
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='%23888' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M2.5 11.5A.5.5 0 013 11h10a.5.5 0 010 1H3a.5.5 0 01-.5-.5zm0-4A.5.5 0 013 7h10a.5.5 0 010 1H3a.5.5 0 01-.5-.5zm0-4A.5.5 0 013 3h10a.5.5 0 010 1H3a.5.5 0 01-.5-.5z' clip-rule='evenodd'/%3E%3C/svg%3E") no-repeat;
}

@media (min-width: $md-screen) {
  .sidebar-toggle {
    position: fixed;
  }
}

.wrap,
.sidebar,
.sidebar-toggle {
  -webkit-backface-visibility: hidden;
      -ms-backface-visibility: hidden;
          backface-visibility: hidden;
}

.wrap,
.sidebar-toggle {
  -webkit-transition: -webkit-transform .3s ease-in-out;
          transition: transform .3s ease-in-out;
}

#sidebar-checkbox:checked + .sidebar {
  z-index: 10;
  visibility: visible;
}
#sidebar-checkbox:checked ~ .sidebar,
#sidebar-checkbox:checked ~ .wrap,
#sidebar-checkbox:checked ~ .sidebar-toggle {
  -webkit-transform: translateX(var(--sidebar-width));
      -ms-transform: translateX(var(--sidebar-width));
          transform: translateX(var(--sidebar-width));
}