@import '../../../styles/mixins'
@import '../../../styles/colors'

.notification-enter-active
  transition: all .3s ease .05s, transform .3s ease, margin .25s ease, clip-path 8s ease .8s

// .notification-leave-active
//   transition: all .25s ease !important

.notification-leave-to
  max-height: 0px !important
  // height: 0px !important
  padding-top: 0px !important
  padding-bottom: 0px !important
  margin-top: 0px !important
  margin-bottom: 0px !important
  box-shadow: 0px 0px 0px 0px rgba(0,0,0,0)
  opacity: 0 !important
  clip-path: circle(0% at 80% 35%) !important
  // transform: translate(0,10px) !important

.notification-enter
  transform: translate(25%)
  clip-path: circle(0% at 80% 35%) !important
  .vs-notification__content
    opacity: 0
    transform: translate(10%)
// .notification-enter-to
//   margin-top: 0px !important
  // .vs-notification__effect
  //   width: 0%
  //   padding-bottom: 0%
.vs-notification-parent
  position: fixed
  right: 0px
  bottom: 0px
  z-index: 200000
  transition: all 25s ease
  padding: 10px 0px
  display: flex
  flex-direction: column
  align-items: flex-end
  justify-content: flex-end
  &--top-right
    bottom: auto
    top: 0px
    display: flex
    flex-direction: column-reverse
  &--top-center
    bottom: auto
    top: 0px
    display: flex
    flex-direction: column-reverse
    left: 50%
    right: auto
    transform: translate(-50%)
    .vs-notification--sticky
      margin: 3px 20px
      border-radius: 20px
      &:last-child
        border-radius: 0px 0px 20px 20px
        margin-top: -10px
    .vs-notification
      clip-path: circle(120% at 50% 0%)
      transition: all .25s ease, transform .3s ease, max-height .25s ease, clip-path .5s ease .1s
      &.vs-notification--border
        border: 3px solid transparent
        border-top: 3px solid vs-color('border')
    .notification-enter
      transform: translate(0,-25%)
      clip-path: circle(0% at 50% 0%) !important
      .vs-notification__content
        opacity: 0
        transform: translate(0,-10%)
  &--bottom-center
    left: 50%
    right: auto
    transform: translate(-50%)
    .vs-notification--sticky
      margin: 3px 20px
      border-radius: 20px
      &:last-child
        border-radius: 20px 20px 0px 0px
        margin-bottom: -10px
    .vs-notification
      clip-path: circle(120% at 50% 100%)
      transition: all .25s ease, transform .3s ease, max-height .25s ease, clip-path .5s ease .1s
      &.vs-notification--border
        border: 3px solid transparent
        border-bottom: 3px solid vs-color('border')
    .notification-enter
      transform: translate(0,25%)
      clip-path: circle(0% at 50% 100%) !important
      .vs-notification__content
        opacity: 0
        transform: translate(0,10%)
  &--top-left
    bottom: auto
    top: 0px
    left: 0px
    right: auto
    display: flex
    flex-direction: column-reverse
    align-items: flex-start
    justify-content: flex-end
    .vs-notification--sticky
      margin-left: 0px
      border-radius: 0px 20px 20px 0px
    .vs-notification
      clip-path: circle(145% at 0% 50%)
      &.vs-notification--border
        border: 3px solid transparent
        border-left: 3px solid vs-color('border')
    .notification-enter
      transform: translate(-25%)
      clip-path: circle(0% at 20% 35%) !important
      .vs-notification__content
        opacity: 0
        transform: translate(-10%)
  &--bottom-left
    left: 0px
    right: auto
    .vs-notification--sticky
      margin-left: 0px
      border-radius: 0px 20px 20px 0px
    .vs-notification
      clip-path: circle(145% at 0% 50%)
      &.vs-notification--border
        border: 3px solid transparent
        border-left: 3px solid vs-color('border')
    .notification-enter
      transform: translate(-25%)
      clip-path: circle(0% at 20% 35%) !important
      .vs-notification__content
        opacity: 0
        transform: translate(-10%)

.vs-notification
  --vs-color: var(--vs-background)
  --vs-border: var(--vs-background)
  --vs-opacity: .6
  position: relative
  max-width: 340px
  width: 100%
  height: auto
  border-radius: 20px
  box-shadow: 0px 10px 30px -5px rgba(0,0,0, vs-var('shadow-opacity'))
  overflow: hidden
  clip-path: circle(145% at 100% 50%)
  background: vs-color('color')
  color: vs-color('text')
  margin: 3px 10px
  transition: all .25s ease, transform .3s ease .1s, max-height .25s ease, clip-path .5s ease .1s
  &:hover:not(&--flat)
    box-shadow: 0px 0px 0px 0px rgba(0,0,0, vs-var('shadow-opacity'))
    transform: translate(0,3px)
  &--notPadding
    padding: 0px !important
  &.vs-notification--icon
    padding-left: 50px !important
  &.vs-notification--loading
    width: 100px !important
    max-height: 100px !important
    min-height: 100px !important
    padding: 0px !important
    padding-left: 0px !important
    display: flex
    align-items: center
    justify-content: center
  &--width-auto
    width: auto
    max-width: none
  &--width-all
    max-width: calc(100vw - 50px)
    width: calc(100vw - 50px)
  &--square
    border-radius: 0px !important
  &--sticky
    margin-right: 0px
    margin-bottom: 0px
    border-radius: 20px 0px 0px 20px
  &--flat
    box-shadow: 0px 0px 0px 0px rgba(0,0,0, vs-var('shadow-opacity'))
    background: vs-color('background')
    color: vs-color('color') !important
    &:hover
      &::after
        background: vs-color('color', .15)
    .vs-notification__progress
      background: vs-color('color')
    .vs-notification__close
      --vs-color: inherit
    .vs-notification__content
      color: vs-color('color') !important
    &.vs-notification--border
      border: 0px solid transparent !important
      border-right: 3px solid vs-color('border') !important
    &:after
      content: ''
      background: vs-color('color', .1)
      width: 100%
      height: 100%
      border-radius: inherit
      position: absolute
      top: 0px
      left: 0px
      z-index: -1
      transition: all .25s ease
  &.vs-notification--onClick
    cursor: pointer
  &.vs-notification--color:not(.vs-notification--flat)
    color: #fff
    .vs-notification__progress
      background: #fff
    .vs-notification__close
      --vs-color: 255,255,255
    .vs-notification__loading
      &:after
        border: 2px solid #fff
        border-top: 2px solid transparent
        border-left: 2px solid transparent
        border-right: 2px solid transparent
      &:before
        border: 2px dashed #fff
        border-top: 2px solid transparent
        border-left: 2px solid transparent
        border-right: 2px solid transparent

  &.vs-notification--border
    border: 3px solid transparent
    border-right: 3px solid vs-color('border')
  &__progress
    width: 0%
    height: 3px
    background: vs-color('text')
    position: absolute
    bottom: 0px
    left: 0px
    transition: all .25s ease
  &__loading
    width: 50px
    height: 50px
    border-radius: 50%
    position: absolute
    &:after
      box-sizing: border-box
      position: absolute
      width: 100%
      height: 100%
      border: 2px solid vs-color('text')
      border-radius: inherit
      border-top: 2px solid transparent
      border-left: 2px solid transparent
      border-right: 2px solid transparent
      animation: loadingNoti .8s ease infinite
      top: 0px
      content: ''
    &:before
      box-sizing: border-box
      top: 0px
      position: absolute
      width: 100%
      height: 100%
      border: 2px dashed vs-color('text')
      border-radius: inherit
      border-top: 2px solid transparent
      border-left: 2px solid transparent
      border-right: 2px solid transparent
      animation: loadingNoti .8s linear infinite
      opacity: .2
      content: ''
  &__close
    --vs-color: var(--vs-text)
    position: absolute
    border: 0px
    background: transparent
    top: 2px
    right: 2px
    transform: scale(.75)
    padding: 0px
  &__icon
    position: absolute
    top: calc(50% - 22px)
    background: transparent
    width: 45px
    height: 45px
    left: 2px
    border-radius: 0px 35% 35% 0px
    // box-shadow: inherit
    display: flex
    align-items: center
    justify-content: center
    i
      font-size: 1.2rem
  &__content
    position: relative
    width: auto
    height: auto
    transition: all .25s ease .2s
    opacity: 1
    &__text
      width: 100%
      p
        margin: 0px
        padding: 0px
        font-size: .75rem
        line-height: 1rem
    &__header
      width: 100%
      margin: 0px
      padding: 0px
      padding-bottom: 6px
      h4
        width: 100%
        margin: 0px
        padding: 0px
        font-size: .9rem

.darken
  .vs-notification--dark
    color: #fff !important
    .vs-notification__close
      --vs-color: 255,255,255 !important
    h4
      color: #fff !important
    p
      color: #fff !important

@keyframes loadingNoti
  0%
    transform: rotate(0deg)
  100%
    transform: rotate(360deg)

@keyframes progressNoti
  0%
    width: 0%
  100%
    width: 100%

@media (max-width: 600px)
  .vs-notification
    margin: 3px 0px !important
    border-radius: 0px !important
    width: 100% !important
    max-width: 100% !important
    min-width: 100% !important
    &:hover
      transform: translate(0) !important
    &:last-child
      margin-bottom: 0px !important
  .vs-notification-parent
    padding: 0px
    width: 100% !important
    max-width: 100% !important
    .vs-notification--sticky
        margin-bottom: 0px !important
    &.vs-notification-parent--top-center
      .vs-notification:last-child
        margin-bottom: 3px
        margin-top: 0px !important