.box(@position: absolute) {
    position: @position;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.modal-mask() {
    pointer-events: none;

    &.zoom-enter,
    &.zoom-appear {
      transform: none;
      opacity: 0;
      animation-duration: @animation-duration-slow;
      user-select: none;
    }

    &-mask {
        .box(fixed);
        z-index: @zindex-modal-mask;
        height: 100%;
        background-color: @modal-mask-color;

        &-hidden {
          display: none;
        }
    }

    &-wrap {
        .box(fixed);
        overflow: auto;
        outline: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        -webkit-overflow-scrolling: touch;
        z-index: @zindex-modal;
    }
}

.modal-size-config(@type) {
    @width: ~'modal-width-@{type}';
    @max-height: ~'modal-max-height-@{type}';
    width: @@width;
    max-height: @@max-height;
}