@import '../../stylesheets/defaults'

.mp-drawer
  height 0
  overflow hidden
  position fixed
  right 0
  top 0
  width 0
  z-index $z-modal

  .mp-drawer-content
    background-color $white
    min-height 100%
    overflow hidden
    padding 0
    position fixed
    right 0
    top 0

  .mp-drawer-bg
    background-color $white
    height 100%
    position fixed
    right 0

  .mp-drawer-bg, .mp-drawer-content
    transform translate3d(100%, 0, 0)
    transition transform ($mp-fast)ms

  .mp-drawer-overlay
    opacity 0

  &.mp-drawer-in
    height 100%
    overflow initial
    width 100%

    .mp-drawer-overlay
      background-color $grey-900
      height 100%
      opacity 0.8
      position fixed
      transition opacity ($mp-fast)ms
      width 100%

    .mp-drawer-bg, .mp-drawer-content
      transform translate3d(0%, 0, 0)

  &.mp-drawer-out
    .mp-drawer-overlay
      opacity 0

    .mp-drawer-bg, .mp-drawer-content
      transform translate3d(100%, 0, 0)

  &.mp-drawer-placement-right .mp-drawer-content
    min-width 690px

  &.mp-drawer-placement-top
    .mp-drawer-content
      min-height 0
      transform translate3d(0, -100%, 0)
      width 100%

    &.mp-drawer-in
      .mp-drawer-bg, .mp-drawer-content
        transform translate3d(0, 0, 0)

    &.mp-drawer-out
      .mp-drawer-bg, .mp-drawer-content
        transform translate3d(0, -100%, 0)

  &.mp-drawer-not-fullscreen
    position absolute

    .mp-drawer-overlay, .mp-drawer-content, .mp-drawer-bg
      position absolute