

$fontSizeSmall: 12px;

.adaptive-box-flex {
    flex: 1;
}

//水平垂直居中布局
.flexible-center-box {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flexible-box-h {
    display: flex;
    flex-direction: column;
}


.flexible-box {
    display: flex;
}

.zb-image-matting-dialog {
    .zb-image-matting-content {
        padding: 10px 30px;
        height: 100%;
        box-sizing: border-box;
        text-align: left;
    }
    .zb-matting-title {
        padding: 30px 0;
        line-height: 30px;
        font-size: $fontSizeSmall;
        label {
            position: relative;
            display: inline-block;
            height: 30px;
            margin-left: 30px;
            &:after {
                content: '';
                margin: -2px 0 0 4px;
                padding: 3px;
                display: inline-block;
                width: 46px;
                height: 22px;
                vertical-align: middle;
                border-radius: 2px;
                background: #fff;
                box-shadow: 0 0 4px #bbbbbb;
            }
            &:before {
                content: '';
                position: absolute;
                top: 3px;
                right: 2px;
                display: inline-block;
                width: 46px;
                height: 22px;
                border-radius: 2px;
                background: #fff;
                border: 1px solid #000000;
                z-index: 1;
            }
            &.zb-matting-opacity {
                &:before {
                    background: url(https://img10.360buyimg.com/imagetools/jfs/t1/171461/22/5660/191/601cf17fE371099fb/a72a205455a61b09.png)
                        repeat;
                }
            }
            &.zb-matting-black {
                &:before {
                    background: black;
                }
            }
            &.zb-matting-blue {
                &:before {
                    background: #008ef7;
                }
            }
            &.zb-matting-white {
                &:before {
                    background: #fff;
                }
            }
        }
        input {
            margin: -2px 5px 0 0;
            vertical-align: middle;
        }
    }
    .zb-matting-result {
        overflow: hidden;
        & > div {
            padding: 20px;
            text-align: center;
        }
        .zb-image-show-bg {
            max-width: 100%;
            max-height: 100%;
            overflow-y: auto;
        }
        .zb-image-matting-bg {
            background: url(https://img10.360buyimg.com/imagetools/jfs/t1/171461/22/5660/191/601cf17fE371099fb/a72a205455a61b09.png)
                repeat;
        }
        img {
            max-width: 100%;
            vertical-align: middle;
        }
        p {
            font-size: $fontSizeSmall;
        }
    }
}
