@import '../../../style/mixin.less';

.set-popup-transform(@transform) {

    &-enter,
    &-exit-active,
    &-exit-done {
        transform: @transform;

        &.translateZ {
            transform: @transform translateZ(2PX);
        }
    }
}

.@{prefix}-popup {
    .@{prefix}-slide-from {
        &-left {
            .set-popup-transform(translate(-100%, 0));
        }

        &-right {
            .set-popup-transform(translate(100%, 0));
        }

        &-top {
            .set-popup-transform(translate(0, -100%));
        }

        &-bottom {
            .set-popup-transform(translate(0, 100%));
        }
    }

    &-content,
    &-mask {
        &[class*="-enter-active"] {
            &.translateZ {
                transform: translateZ(2PX);
            }

            transform: translate(0, 0);
            .use-var(transition, popup-enter-transition);
        }
    }

    [class*="-exit-active"] {
        .use-var(transition, popup-exit-transition);
    }

    &-content {
        &[class*="-enter-active"] {
            transition-duration: var(--builtin-transition-popup-slide-enter-duration, 450ms);
        }
        &[class*="-exit-active"] {
            transition-duration: var(--builtin-transition-popup-slide-exit-duration, 240ms);
        }
        &.need-bottom-offset {
            padding-bottom: constant(safe-area-inset-bottom);
            padding-bottom: env(safe-area-inset-bottom);
        }

        &.left {
            left: 0;
            top: 0;
            height: 100%;
        }

        &.top {
            left: 0;
            top: 0;
            width: 100%;
        }

        &.right {
            right: 0;
            top: 0;
            height: 100%;
        }

        &.bottom {
            left: 0;
            bottom: 0;
            width: 100%;
        }

        &.translateZ {
            transform: translateZ(2PX);
        }

        .use-var(background, popup-content-background);
        position: fixed;
        z-index: @full-screen-z-index+1;
    }

    &-mask {
        &[class*="-enter-active"] {
            transition-duration: var(--builtin-transition-fade-enter-duration, 450ms);
        }
        &[class*="-exit-active"] {
            transition-duration: var(--builtin-transition-fade-exit-duration, 240ms);
        }
        &.translateZ {
            transform: translateZ(1PX);
        }

        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: @full-screen-z-index;
        .use-var(background, popup-mask-background);
    }
}

/***************************************************
 *                                                 *
 *               Arco Theme Style                  *
 *                                                 *
 ***************************************************/
& when (@use-dark-mode = 1) {
    
  .process-bg-color-with-config,
  .process-custom-icon-bg-color-with-config {
    @{arco-dark-mode-selector} & {
      .use-var(color, dark-steps-process-with-config-item-icon-color);
      .use-var(color, dark-steps-process-with-config-item-icon-color);
    }
  }
  .wait-custom-icon-bg-color-with-config {
    @{arco-dark-mode-selector} & {
      .use-var(background, dark-steps-wait-icon-num-background);
      .use-var(color, dark-sub-info-font-color);
      .use-var(background, dark-steps-wait-icon-num-background);
      .use-var(color, dark-sub-info-font-color);
    }
  }
  .@{prefix}-popup {
    &-content {
      @{arco-dark-mode-selector} & {
        .use-var(background, dark-popup-content-background);
      }
    }
  }
}
/********************* End *************************/