/* Slide menu
   ========================================================================== */
.slide-menu {
  &--open,
  &--processing {
    overflow: hidden;
  }
  &__menu {
    position: fixed;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    background-color: $slide-menu-bg;
    z-index: 0;
    .slide-menu--left & {
      width: $slide-menu-size;
      height: 100%;
      top: 0;
      bottom: 0;
      left: 0;
      right: auto;
    }
    .slide-menu--right & {
      width: $slide-menu-size;
      height: 100%;
      top: 0;
      bottom: 0;
      left: auto;
      right: 0;
    }
    .slide-menu--top & {
      width: 100%;
      height: $slide-menu-size;
      top: 0;
      bottom: auto;
      left: 0;
      right: 0;
    }
    .slide-menu--bottom & {
      width: 100%;
      height: $slide-menu-size;
      top: auto;
      bottom: 0;
      left: 0;
      right: 0;
    }
  }
  &__panel {
    position: relative;
    z-index: 1;
    background-color: $body-bg;
    transition: $slide-menu-transition;
    .slide-menu--open &,
    .slide-menu--processing & {
      overflow: hidden;
    }
    .slide-menu--open.slide-menu--left & {
      transform: translate3d($slide-menu-size, 0, 0);
    }
    .slide-menu--open.slide-menu--right & {
      transform: translate3d(-$slide-menu-size, 0, 0);
    }
    .slide-menu--open.slide-menu--top & {
      transform: translate3d(0, $slide-menu-size, 0);
    }
    .slide-menu--open.slide-menu--bottom & {
      transform: translate3d(0, -$slide-menu-size, 0);
    }
  }
}