// 屏幕高度
$n-media-set(attr, value1, value2)
  {attr} value1
  @media screen and (max-height: 800px)
    {attr} value2

$n-media-set-height(value1, value2)
  $n-media-set(max-height, value1, value2)
  &.flex
    $n-media-set(height, value1, value2)

.n-popup
  position absolute
  background-color #FFFFFF
  border-radius 8px
  min-width 480px
  box-shadow 0 2px 8px 0 rgba(22, 22, 22, 0.25)
  & > div:first-child
    border-radius 8px 8px 0 0
  & > div:last-child
    border-radius 0 0 8px 8px
  &-header
    height 56px
    padding 0 16px
    background linear-gradient(180deg, #FFFFFF 0%, #F0F3F6 100%)
    display flex
    align-items center
  &-title
    n-h2()
    s-ellipsis()
    color $n-color-1
    font-weight bold
    margin-right auto
  &-footer
    height 60px
    display flex
    align-items center
    justify-content flex-end
    padding 0 16px
    & > .n-btn
      margin-left 16px
    & > .n-btn:first-child
      margin-left 0

// 最大化
.n-popup.maximize
  top 0 !important
  left 0 !important
  width 100vw
  height 100vh
  display flex
  flex-direction column
  .n-popup-center
    flex auto
    position relative
  .n-popup-content
    n-absolute(0, 0, 0, 0)

// 宽度
.n-popup-content
  &.width-small
    width 480px
  &.width-middle
    width 800px
  &.width-large
    width 1040px

// 高度
.n-popup
  &.height-large
    $n-media-set(top, 8vh, 2vh)
  &.height-middle
    $n-media-set(top, 16vh, 8vh)
.n-popup-content
  overflow auto
  &.height-large
    $n-media-set-height(calc(84vh - 58px), calc(96vh - 58px))
  &.height-middle
    $n-media-set-height(calc(68vh - 58px), calc(84vh - 58px))
  &.has-footer.height-large
    $n-media-set-height(calc(84vh - 118px), calc(96vh - 118px))
  &.has-footer.height-middle
    $n-media-set-height(calc(68vh - 118px), calc(84vh - 118px))

.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-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)

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