.app-modal {
    top   : 0;
    left  : 0;
    width : 100%;
    height: 100%;

    &__mask {
        position             : absolute;
        top                  : 0;
        left                 : 0;
        width                : 100%;
        height               : 100%;
        background-color     : rgba(0, 0, 0, .35);
        //backdrop-filter    : blur(2px);
        transition-property  : opacity;

        &:not(.is-show) {
            opacity: 0;
        }
    }

    &__wrapper {
        position : relative;
        z-index  : 1;
        display  : flex;
        flex-wrap: wrap;
        height   : 100%;
        overflow : hidden;
    }

    &__container {
        max-width : 100vw;
        max-height: 100vh;
    }

    /* 全屏 */
    &__wrapper.full {
        justify-content: center;
        align-items    : center;
    }

    &__wrapper.full &__container {
        width              : 100%;
        height             : 100%;
        border-radius      : 0;
        transition-property: transform, opacity;

        &:not(.is-show) {
            opacity  : .5;
            transform: scale(0);
        }
    }

    /* 居中 */
    &__wrapper.center {
        justify-content: center;
        align-items    : center;
    }

    &__wrapper.center &__container {
        transition-property: transform, opacity;

        &:not(.is-show) {
            opacity  : 0;
            transform: translate3d(0, -15%, 0);
        }
    }

    /* 上 */
    &__wrapper.top {
        flex-direction: column;
        align-items   : center;
    }

    &__wrapper.top &__container:not(.is-show) {
        transform: translate3d(0, -100%, 0);
    }

    /* 下 */
    &__wrapper.bottom {
        flex-direction : column;
        justify-content: flex-end;
        align-items    : center;
    }

    &__wrapper.bottom &__container:not(.is-show) {
        transform: translate3d(0, 100%, 0);
    }

    /* 左 */
    &__wrapper.left {
        align-items: center;
    }

    /* 左上 */
    &__wrapper.left-top {
        align-items: flex-start;
    }

    /* 左下 */
    &__wrapper.left-bottom {
        align-items: flex-end;
    }

    &__wrapper[class*='left'] &__container:not(.is-show) {
        transform: translate3d(-100%, 0, 0);
    }

    /* 右 */
    &__wrapper.right {
        justify-content: flex-end;
        align-items    : center;
    }

    /* 右上 */
    &__wrapper.right-top {
        justify-content: flex-end;
        align-items    : flex-start;
    }

    /* 右下 */
    &__wrapper.right-bottom {
        justify-content: flex-end;
        align-items    : flex-end;
    }

    &__wrapper[class*='right'] &__container:not(.is-show) {
        transform: translate3d(100%, 0, 0);
    }
}