.ql-editor img[data-image-size="25"], .rich-content img[data-image-size="25"] {
    width: 25%;
}

.ql-editor img[data-image-size="50"], .rich-content img[data-image-size="50"] {
    width: 50%;
}

.ql-editor img[data-image-size="75"], .rich-content img[data-image-size="75"] {
    width: 75%;
}

.ql-editor img[data-image-size="100"], .rich-content img[data-image-size="100"] {
    width: 100%;
}

.ql-editor img {
    cursor: pointer;
    transition: width .18s ease, outline-color .18s ease;
}

    .ql-editor img.image-size-selected {
        outline: 3px solid #6558e8;
        outline-offset: 3px;
    }

.image-size-picker {
    position: fixed;
    z-index: 10000;
    display: none;
    gap: 4px;
    padding: 6px;
    border: 1px solid #d9dce6;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 8px 25px rgba(23,32,51,.2);
}

    .image-size-picker.visible {
        display: flex;
    }

    .image-size-picker button {
        border: 0;
        border-radius: 6px;
        padding: 6px 9px;
        background: #f0efff;
        color: #5146cc;
        font: 600 12px "Segoe UI", sans-serif;
        cursor: pointer;
    }

        .image-size-picker button:hover, .image-size-picker button.active {
            background: #5b50d8;
            color: #fff;
        }