.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(@type) {
    @min-height: ~'modal-height-@{type}';
    @max-height: ~'modal-max-height-@{type}';
    min-height: @@min-height;
    max-height: @@max-height;
}

.modal-size-config-content(@type) {
    width: 100%;
    .modal-size(@type);
}

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