#sidebar {
  position: static;
  overflow: scroll;
  width: $sidebar-desktop;
  top: 0;
  bottom: 0;
  the-transition();

  +tablet-mobile() {
    display: none;
    position: fixed;
    right: 0;
    background: var(--grey-1);
    box-shadow: 0 .375rem .9375rem .3125rem rgba(0, 0, 0, .2);
    z-index: $zindex-3;
  }

  &.affix {
    >.inner {
      position: fixed;
      top: 0;
    }
    .panels {
      padding-top: 3.625rem;
      height: 100vh;
    }
  }

  >.inner {
    position: relative;
    width: $sidebar-desktop;
    color: var(--grey-6);
    text-align: center;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    flex-wrap: wrap;
    z-index: $zindex-1;
  }
}

.panels {
  padding: 4.6875rem 0 2rem;
  width: 100%;
  overflow: hidden;
  min-height: 100vh;

  .inner {
    margin-top: 2.5rem;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    width: auto;
    height: 100%;

    +tablet-mobile() {
      margin-top: 0;
    }

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .panel {
    display: none;
    padding: .875rem .9375rem 2rem;
  }
}


@import 'dimmer';
@import 'author';
@import 'menu';
@import 'social';

@import 'quick';
@import 'tab';

@import 'toc';
@import 'related';
@import 'state';