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

.vs-dialog-enter-active
  transition: all .25s ease
  .vs-dialog
    &:not(.vs-dialog--fullScreen)
      animation: rebound .4s
.vs-dialog-leave-active
  transition: all .15s ease
  .vs-dialog
    transition: all .15s ease


.vs-dialog-enter, .vs-dialog-leave-to
  opacity: 0
  .vs-dialog
    transform: scale(.7)
    box-shadow: 0px 0px 0px 0px rgba(0,0,0, vs-var('shadow-opacity'))
    &--fullScreen
      transform: translate(0,8%) !important

@keyframes rebound
  0%
    transform: scale(.8)
  40%
    transform: scale(1.08)
  80%
    transform: scale(0.98)
  100%
    transform: scale(1)

@keyframes reboundClick
  0%
    transform: scale(1)
  40%
    transform: scale(1.05)
  80%
    transform: scale(0.96)
  100%
    transform: scale(1)

.vs-dialog-content
  background: rgba(0,0,0, vs-var('background-opacity'))
  position: fixed
  left: 0px
  top: 0px
  z-index: vs-var('zindex-2')
  display: flex
  align-items: flex-start
  justify-content: center
  width: 100%
  height: 100%
  max-height: 100vh
  overflow-y: auto
  overflow-x: hidden
  padding-top: 80px
  padding-bottom: 80px
  &.fullScreen
    padding: 0px
    overflow: hidden
  &.blur
    backdrop-filter: saturate(180%) blur(15px)

.vs-dialog
  background: vs-color('background')
  color: vs-color('text')
  position: relative
  min-width: 400px
  border-radius: vs-var('radius')
  transition: all .25s ease
  box-shadow: 0px 5px 30px 0px rgba(0,0,0, vs-var('shadow-opacity'))
  max-width: 800px
  margin: auto
  &--notCenter
    .vs-dialog__header
      display: block
  &__loading
    width: 100%
    position: absolute
    top: 0px
    left: 0px
    height: 100%
    border-radius: inherit
    background: vs-color('background', .8)
    z-index: 100
    display: flex
    align-items: center
    justify-content: center
    &:after
      content: ''
      position: absolute
      width: 30px
      height: 30px
      border-radius: inherit
      border: 2px solid vs-color('color', 1)
      border-top: 2px solid vs-color('color', 0)
      border-left: 2px solid vs-color('color', 0)
      border-bottom: 2px solid vs-color('color', 0)
      box-sizing: border-box
      transition: all .25s ease
      display: block
      box-shadow: 0px 0px 0px 0px vs-color('color',1)
      animation: loadingDialog .6s ease infinite
    &:before
      content: ''
      position: absolute
      width: 30px
      height: 30px
      border-radius: inherit
      border: 2px dashed vs-color('color',1)
      border-top: 2px solid vs-color('color', 0)
      border-left: 2px solid vs-color('color', 0)
      border-bottom: 2px solid vs-color('color', 0)
      box-sizing: border-box
      transition: all .25s ease
      display: block
      box-shadow: 0px 0px 0px 0px vs-color('color',1)
      animation: loadingDialog .6s linear infinite
  &--scroll
    .vs-dialog__content
      max-height: calc(80vh - 200px)
      overflow: auto
  &--autoWidth
    width: auto !important
    min-width: auto !important
    max-width: auto !important
  &--square
    border-radius: 0px
    .vs-dialog__close
      border-radius: 0px
  &--notPadding
    .vs-dialog__footer
      padding: 0px
    .vs-dialog__content
      padding: 0px
      margin-bottom: 0px !important
    .vs-dialog__header
      padding: 0px
  &--rebound
    animation: reboundClick .3s !important
  &--fullScreen
    width: calc(100% - 30px) !important
    height: calc(100% - 30px) !important
    max-width: none !important
    max-height: none !important
  &__footer
    padding: 10px 16px
    padding-top: 0px
  &__header
    display: flex
    align-items: center
    justify-content: center
    padding: 10px 16px
  &__content
    padding: 10px 16px
    width: 100%
    position: relative
    border-radius: inherit
    &.notFooter
      margin-bottom: 20px
  &__close
    --vs-color: var(--vs-text)
    position: absolute
    top: -6px
    right: -6px
    padding: 0px
    margin: 0px
    display: flex
    align-items: center
    justify-content: center
    background: inherit
    border-radius: 12px
    box-shadow: 0px 5px 20px 0px rgba(0,0,0, vs-var('shadow-opacity'))
    transition: all .25s ease
    z-index: 200
    i
      width: 34px
      height: 34px
      opacity: .7
      &:after
        width: 14px
      &:before
        width: 14px
    &:hover
      box-shadow: 0px 0px 4px 0px rgba(0,0,0, vs-var('shadow-opacity'))
      transform: translate(-2px, 2px)
      i
        opacity: 1

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

@media (max-width: 600px)
  .vs-dialog
    min-width: calc(100vw - 20px)
    max-width: calc(100vw - 20px)
    margin: auto 10px