.q-notifications__list
  z-index $z-notify
  pointer-events none
  left 0
  right 0
  margin-bottom 10px
  position relative

  &--center
    top 0
    bottom 0
  &--top
    top 0
  &--bottom
    bottom 0

body.q-ios-padding .q-notifications__list
  &--center, &--top
    top $ios-statusbar-height
    top env(safe-area-inset-top)
  &--center, &--bottom
    bottom env(safe-area-inset-bottom)

.q-notification
  box-shadow $shadow-2
  border-radius $generic-border-radius
  pointer-events all
  display inline-flex
  margin 10px 10px 0
  transition transform 1s, opacity 1s
  z-index $z-notify

  min-width 300px
  max-width 95vw

  background #323232
  color white

  font-size 14px

  &__icon
    font-size 24px
    padding-right 16px

  &__avatar
    font-size 32px
    padding-right 8px

  &__message
    padding 8px 0

  &__actions
    color #c581ff

  &--standard
    padding 0 16px
    min-height 48px

    .q-notification__actions
      padding 6px 0 6px 8px
      margin-right -8px

  &--multi-line
    min-height 68px
    padding 8px 16px

    .q-notification__actions
      padding 0

  &--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

@media (min-width $breakpoint-sm-min)
  .q-notification
    max-width 65vw