.popup-slide {
  &-center-enter-active {
    animation: nut-fade-in;
  }

  &-center-leave-active {
    animation: nut-fade-out;
  }

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

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

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

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

.popup-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.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: #fff;
  transition: transform 0.3s;
  -webkit-overflow-scrolling: touch;
}

@keyframes nut-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes nut-fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

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

.nutui-popup {
  &__close-icon {
    position: absolute;
    z-index: 1;
    color: #969799;
    font-size: 18px;
    cursor: pointer;

    &: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;
    }
  }
}