.mui-transition-slide-in {
  position: relative;
  overflow: hidden;
  height: 100%;

  .mui-transition-slide-in-child {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
    @include ease-out();
  }

  .mui-transition-slide-in-enter {
    opacity: 0;
  }

  .mui-transition-slide-in-enter-active {
    opacity: 1;
  }

  .mui-transition-slide-in-leave {
    opacity: 1;
  }

  .mui-transition-slide-in-leave-active {
    opacity: 0;
  }

  &.mui-is-left {
    .mui-transition-slide-in-enter {
      transform: translate3d(100%,0,0);
    }
    .mui-transition-slide-in-enter-active {
      transform: translate3d(0,0,0);
    }
    .mui-transition-slide-in-leave {
      transform: translate3d(0,0,0);
    }
    .mui-transition-slide-in-leave-active {
      transform: translate3d(-100%,0,0);
    }

  }

  &.mui-is-right {
    .mui-transition-slide-in-enter {
      transform: translate3d(-100%,0,0);
    }
    .mui-transition-slide-in-enter-active {
      transform: translate3d(0,0,0);
    }
    .mui-transition-slide-in-leave {
      transform: translate3d(0,0,0);
    }
    .mui-transition-slide-in-leave-active {
      transform: translate3d(100%,0,0);
    }
  }

  &.mui-is-up {
    .mui-transition-slide-in-enter {
      transform: translate3d(0,100%,0);
    }
    .mui-transition-slide-in-enter-active {
      transform: translate3d(0,0,0);
    }
    .mui-transition-slide-in-leave {
      transform: translate3d(0,0,0);
    }
    .mui-transition-slide-in-leave-active {
      transform: translate3d(0,-100%,0);
    }
  }

  &.mui-is-down {
    .mui-transition-slide-in-enter {
      transform: translate3d(0,-100%,0);
    }
    .mui-transition-slide-in-enter-active {
      transform: translate3d(0,0,0);
    }
    .mui-transition-slide-in-leave {
      transform: translate3d(0,0,0);
    }
    .mui-transition-slide-in-leave-active {
      transform: translate3d(0,100%,0);
    }
  }

}