.nut-popup {
  position: fixed;
  max-height: 100%;
  overflow-y: auto;
  background-color: $white;
  color: $gray1;
  -webkit-overflow-scrolling: touch;

  &__close-icon {
    position: absolute !important;
    z-index: 1;
    color: $popup-close-icon-color;
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: 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;
    }
  }
}

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

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

.nut-popup-bottom {
  bottom: 0;
  left: 0;
  width: 100%;

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

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

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

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

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

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

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

.nut-popup-slide {
  @keyframes popup-scale-fade-in {
    from {
      opacity: 0;
      transform: scale(0.8);
    }

    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  @keyframes popup-scale-fade-out {
    from {
      opacity: 1;
      transform: scale(1);
    }

    to {
      opacity: 0;
      transform: scale(0.8);
    }
  }

  &-default-enter-active {
    animation-fill-mode: both;
    animation-name: popup-scale-fade-in;
    animation-duration: 0.3s;
  }

  &-default-exit-active {
    animation-fill-mode: both;
    animation-name: popup-scale-fade-out;
    animation-duration: 0.3s;
  }

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

    to {
      opacity: 1;
    }
  }

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

    to {
      opacity: 0;
    }
  }

  &-center-enter-active {
    animation-fill-mode: both;
    animation-name: popup-fade-in;
    animation-duration: 0.3s;
  }

  &-center-exit-active {
    animation-fill-mode: both;
    animation-name: popup-fade-out;
    animation-duration: 0.3s;
  }

  /* 从顶部滑出 */
  @keyframes popup-slide-top-enter {
    from {
      transform: translate3d(0, -100%, 0);
    }
  }
  @keyframes popup-slide-top-exit {
    to {
      transform: translate3d(0, -100%, 0);
    }
  }

  &-top-enter-active,
  &-top-appear-active {
    transform: translate3d(0, 0%, 0);
    animation-fill-mode: both;
    animation-name: popup-slide-top-enter;
    animation-duration: 0.3s;
  }

  &-top-exit-active {
    animation-fill-mode: both;
    animation-name: popup-slide-top-exit;
    animation-duration: 0.3s;
  }

  /* 从右侧滑出 */
  @keyframes popup-slide-right-enter {
    from {
      transform: translate3d(100%, 0, 0);
    }
  }
  @keyframes popup-slide-right-exit {
    to {
      transform: translate3d(100%, 0, 0);
    }
  }

  &-right-enter-active,
  &-right-appear-active {
    transform: translate3d(0, 0, 0);
    animation-fill-mode: both;
    animation-name: popup-slide-right-enter;
    animation-duration: 0.3s;
  }

  &-right-exit {
    animation-fill-mode: both;
    animation-name: popup-slide-right-exit;
    animation-duration: 0.3s;
  }

  /* 从底部滑出 */
  @keyframes popup-slide-bottom-enter {
    from {
      transform: translate3d(0, 100%, 0);
    }
  }
  @keyframes slide-bottom-exit {
    to {
      transform: translate3d(0, 100%, 0);
    }
  }

  &-bottom-enter-active,
  &-bottom-appear-active {
    transform: translate(0, 0);
    animation-fill-mode: both;
    animation-name: popup-slide-bottom-enter;
    animation-duration: 0.3s;
  }

  &-bottom-exit {
    animation-fill-mode: both;
    animation-name: slide-bottom-exit;
    animation-duration: 0.3s;
  }

  /* 从左侧滑出 */
  @keyframes popup-slide-left-enter {
    from {
      transform: translate3d(-100%, 0, 0);
    }
  }
  @keyframes popup-slide-left-exit {
    to {
      transform: translate3d(-100%, 0, 0);
    }
  }

  &-left-enter-active,
  &-left-appear-active {
    transform: translate(0, 0);
    animation-fill-mode: both;
    animation-name: popup-slide-left-enter;
    animation-duration: 0.3s;
  }

  &-left-exit-active,
  &-left-exit-done {
    animation-fill-mode: both;
    animation-name: popup-slide-left-exit;
    animation-duration: 0.3s;
  }
}

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