// 动画
.uif-popup-enter-active
.uif-popup-leave-active
  transition all 0.2s ease
.uif-popup-enter
  opacity 0
  transform scale(0.5, 0.5)
.uif-popup-leave-to
  opacity 0
  transform translateY(-100px)


.uif-popup
  &-wrap
    position fixed
    top 0
    left @top
    height @top
    width 100%
    z-index 1000
    display flex
    justify-content center
  &-mask
    position fixed
    top 0
    left @top
    height 100%
    width @height
    background-color $popup-mask-bg-color
    display flex
    align-items center
    justify-content center
    flex-direction column
    &-loading
      width 120px
      height @width
      background-size contain
      background-position center
      background-repeat no-repeat
      margin auto
    &-close
      margin-bottom 56px
      color #BFBFBF
      &:hover
        color #8288ab
    &-destroy
      position absolute
      right 20px
      top 20px
      color #BFBFBF
      width 32px
      font-size @width
      line-height @width
  &-navigation
    position absolute
    left 100%
    transform translate(8px, 12px)

// 容器
.uif-popup-container
  position absolute
  background-color $popup-bg-color
  border-radius $popup-radius
  min-width $popup-min-width
  box-shadow $popup-box-shadow
  &.height-large
    top 8vh
  &.height-middle
    top 16vh
  &.maximize
    top 0 !important
    left 0 !important

// header
.uif-popup-header
  display flex
  align-items center
  justify-content space-between
  height $popup-header-height
  padding-left $popup-padding
  padding-right @padding-left
  background-color $popup-header-bg-color
  border-top-left-radius $popup-radius
  border-top-right-radius $popup-radius
  .title
    s-ellipsis()
    font-size 14px
    line-height 20px
    color $title-color
    margin-right auto
  & > .uif-i
    margin-left 12px
  & > .uif-i-action:not(:hover)
    color #142133

// footer
.uif-popup-footer
  height $popup-footer-height
  padding-left $popup-padding
  padding-right @padding-left
  display flex
  align-items center
  justify-content flex-end
  & > .uif-btn:not(:first-child)
    margin-left 12px

// content
.uif-popup-content
  overflow auto
  &.height-large
    max-height calc(84vh - 104px)
    &-flex
      height calc(84vh - 104px)
  &.height-middle
    max-height calc(68vh - 104px)
    &-flex
      height calc(68vh - 104px)
  &.width-small
    width 480px
  &.width-middle
    width 800px
  &.width-large
    width 1040px
  &.flex
    display flex
    flex-direction column
  &.maximize
    max-height calc(100vh - 104px)
    height calc(100vh - 104px)
    width 100vw
  .uif-slide-block
    padding 12px 20px 0
    &:last-child
      padding-bottom 24px

@media screen and (max-height: 800px)
  .uif-popup-container.height-large
    top 2vh
  .uif-popup-container.height-middle
    top 8vh
  .uif-popup-content.height-large
    max-height calc(96vh - 104px)
    &-flex
      height calc(96vh - 104px)
  .uif-popup-content.height--middle
    max-height calc(84vh - 104px)
    &-flex
      height calc(84vh - 104px)