.nut-theme-dark {
  .nut-popup {
    background: $dark-background2;
  }
  .nutui-popup {
    &__close-icon {
      color: $dark-color;
    }
  }
}

.popup-slide {
  &-center-enter,
  &-center-exit {
    opacity: 0;
  }
  &-center-enter-active {
    opacity: 1;
    transition: opacity 0.5s ease;
  }

  &-top-enter,
  &-top-exit {
    transform: translate(0, -100%);
  }
  &-top-enter-active {
    transform: translate(0, 0);
  }

  &-right-enter,
  &-right-exit {
    transform: translate(100%, 0);
  }
  &-right-enter-active {
    transform: translate(0, 0);
  }

  &-bottom-enter,
  &-bottom-exit {
    transform: translate(0, 100%);
  }
  &-bottom-enter-active {
    transform: translate(0, 0);
  }

  &-left-enter,
  &-left-exit {
    transform: translate(-100%, 0);
  }
  &-left-enter-active {
    transform: translate(0, 0);
  }
}

.popup-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  &.round {
    border-radius: $popup-border-radius;
  }
}

.popup-bottom {
  bottom: 0;
  left: 0;
  width: 100%;
  &.round {
    border-radius: $popup-border-radius $popup-border-radius 0 0;
  }
}

.popup-right {
  top: 0;
  right: 0;

  &.round {
    border-radius: $popup-border-radius 0 0 $popup-border-radius;
  }
}

.popup-left {
  top: 0;
  left: 0;

  &.round {
    border-radius: 0 $popup-border-radius $popup-border-radius 0;
  }
}

.popup-top {
  top: 0;
  left: 0;
  width: 100%;

  &.round {
    border-radius: 0 0 $popup-border-radius $popup-border-radius;
  }
}

.nut-popup {
  position: fixed;
  max-height: 100%;
  overflow-y: auto;
  background-color: $white;
  transition: transform 0.5s;
  -webkit-overflow-scrolling: touch;
}

.nut-overflow-hidden {
  overflow: hidden !important;
}

.nutui-popup {
  &__close-icon {
    position: absolute !important;
    z-index: 1;
    color: #969799;
    font-size: 18px;
    cursor: pointer;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;

    &:active {
      opacity: 0.7;
    }

    &--top-left {
      top: $popup-close-icon-margin;
      left: $popup-close-icon-margin;
    }

    &--top-right {
      top: $popup-close-icon-margin;
      right: $popup-close-icon-margin;
    }

    &--bottom-left {
      bottom: $popup-close-icon-margin;
      left: $popup-close-icon-margin;
    }

    &--bottom-right {
      right: $popup-close-icon-margin;
      bottom: $popup-close-icon-margin;
    }
  }
}

.fade-enter {
  transform: translate(0, -100%);
}
.fade-enter-active {
  transform: translate(0, 0);
}
.fade-exit {
  transform: translate(0, -100%);
}