@import '~styles/mixins';

.SideMenu {
  position: fixed;
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
  z-index: 10;

  .background {
    background: rgba(0, 0, 0, 0.5);
    @include absolute-fill;
    position: fixed;
    opacity: 0;
    transition: all 400ms;
    z-index: 1;
  }

  .menu {
    overflow: auto;
    z-index: 2;
    position: fixed;
    height: 100vh;
    width: auto;
    background-color: $background_color_sidemenu;
    transition: all 400ms;
    min-width: $min_width_sidemenu;

    &.demo {
      padding: 40px;
    }

    &.transparent {
      background-color: transparent;
      box-shadow: none !important;
    }
  }

  &.right .menu {
    right: 0;
    transform: translateX(100%);
    box-shadow: 0 3px 8px 0 rgba(0, 0, 48, 0.18);
  }

  &.left .menu {
    left: 0;
    transform: translateX(-100%);
    box-shadow: 0 -3px 8px 0 rgba(0, 0, 48, 0.18);
  }

  @include customAppearTransition('side') {
    .menu {
      transform: translateX(0%);
    }

    .background {
      opacity: 1;
    }
  }
}
