@import './../common/abstracts/_mixin.scss';
@import './../common/abstracts/variable.scss';
@import '../wd-overlay/index.scss';

.wot-theme-dark {
  @include b(popup) {
    background: $-dark-background2;

    @include e(close) {
      color: $-dark-color;
    }
  }
}

@include b(popup) {
  position: fixed;
  max-height: 100%;
  overflow-y: auto;
  background: #fff;

  @include edeep(close) {
    position: absolute;
    top: 10px;
    right: 10px;
    color: $-popup-close-color;
    font-size: $-popup-close-size;
    transform: rotate(-45deg);
  }

  @include m(center) {
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
  }

  @include m(left) {
    top: 0;
    bottom: 0;
    left: 0;
  }

  @include m(right) {
    top: 0;
    right: 0;
    bottom: 0;
  }

  @include m(top) {
    top: 0;
    left: 0;
    right: 0;
  }

  @include m(bottom) {
    right: 0;
    bottom: 0;
    left: 0;
  }
}

.wd-center-enter-active,
.wd-center-leave-active {
  transition-property: opacity;
}

.wd-center-enter,
.wd-center-leave-to {
  opacity: 0;
}

.wd-top-enter-active,
.wd-top-leave-active,
.wd-bottom-enter-active,
.wd-bottom-leave-active,
.wd-left-enter-active,
.wd-left-leave-active,
.wd-right-enter-active,
.wd-right-enter-active {
  transition-property: transform;
}

.wd-top-enter,
.wd-top-leave-to {
  transform: translate3d(0, -100%, 0);
}

.wd-bottom-enter,
.wd-bottom-leave-to {
  transform: translate3d(0, 100%, 0);
}

.wd-left-enter,
.wd-left-leave-to {
  transform: translate3d(-100%, 0, 0);
}

.wd-right-enter,
.wd-right-leave-to {
  transform: translate3d(100%, 0, 0);
}

.wd-zoom-in-enter-active,
.wd-zoom-in-leave-active {
  transition-property: opacity, transform;
  transform-origin: center center;
}

.wd-zoom-in-enter,
.wd-zoom-in-leave-to {
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scale(0.7);
}