.q-notifications > div
  z-index $z-notify

.q-notification-list
  pointer-events none
  left 0
  right 0
  margin-bottom 10px
  position relative
.q-notification-list-center
  top 0
  bottom 0
.q-notification-list-top
  top 0
.q-notification-list-bottom
  bottom 0

.q-notification
  border-radius 5px
  pointer-events all
  display inline-block
  margin 10px 10px 0
  transition all 1s
  z-index $z-notify
  max-width 100%

.q-notification-
  &top-left-enter, &top-left-leave-to,
  &top-enter, &top-leave-to,
  &top-right-enter, &top-right-leave-to
    opacity 0
    transform translateY(-50px)
    z-index ($z-notify - 1)

  &left-enter, &left-leave-to,
  &center-enter, &center-leave-to,
  &right-enter, &right-leave-to,
  &bottom-left-enter, &bottom-left-leave-to,
  &bottom-enter, &bottom-leave-to,
  &bottom-right-enter, &bottom-right-leave-to
    opacity 0
    transform translateY(50px)
    z-index ($z-notify - 1)

  &top-left-leave-active,
  &top-leave-active,
  &top-right-leave-active,
  &left-leave-active,
  &center-leave-active,
  &right-leave-active,
  &bottom-left-leave-active,
  &bottom-leave-active,
  &bottom-right-leave-active
    position absolute
    z-index ($z-notify - 1)
    margin-left 0
    margin-right 0

  &top-leave-active,
  &center-leave-active
    top 0

  &bottom-left-leave-active,
  &bottom-leave-active,
  &bottom-right-leave-active
    bottom 0