// @use "sass:meta";
// @include meta.load-css("cropperjs/src/index.css");
@use "cropperjs/src/css/cropper.scss";
// 因为是dialog是放在body上的，所以不能在img-upload下写样式
// 由于该插件不能动态计算宽高，所以只能在样式里指定宽高才会展示
.cms-cropper-panel {
    display: flex;
    width: 100%;
    height: 500px;

    .cropper-box {
        width: 780px;
        height: 500px;
        border: solid 1px #ddd;
    }

    .preview-box {
        display: inline-block;
        flex: 1;
        padding-left: 20px;

        .tips-text {
            line-height: 40px;
            color: #000;
        }

        .preview-img-box {
            width: 160px;
            height: 160px;
            overflow: hidden;
        }
    }
}
.el-dialog.cms-cropper-dialog {
    .el-dialog__body {
        // padding: 12px 20px 0px;
        overflow: hidden;
    }

    .el-dialog__footer {
        // padding: 8px 20px;
        // box-shadow:
        //     0px -1px 0px 0px #f5f5f5,
        //     0px 1px 30px 0px rgba(0, 21, 41, 0.12);

        .el-button {
            min-width: 80px;
        }
    }
}