/*
 * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
 * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
 */

:root {
    --ck-image-style-spacing: 1.5em;
    --ck-inline-image-style-spacing: calc(var(--ck-image-style-spacing) / 2);
}

:root {
    --ck-color-image-caption-background: hsl(0, 0%, 97%);
    --ck-color-image-caption-text: hsl(0, 0%, 20%);
    --ck-color-image-caption-highligted-background: hsl(52deg 100% 50%);
}

/*image*/
.image {
    display: table;
    clear: both;
    text-align: center;
    margin: 0.9em auto;
    min-width: 50px;
}

.image-style-block-align-left,
.image-style-block-align-right {
    max-width: calc(100% - var(--ck-image-style-spacing));
}

/* Allows displaying multiple floating images in the same line.
See https://github.com/ckeditor/ckeditor5/issues/9183#issuecomment-804988132 */
.image-style-align-left,
.image-style-align-right {
    clear: none;
}

.image-style-side {
    float: right;
    margin-left: var(--ck-image-style-spacing);
    max-width: 50%;
}

.image-style-align-left {
    float: left;
    margin-right: var(--ck-image-style-spacing);
}

.image-style-align-center {
    margin-left: auto;
    margin-right: auto;
}

.image-style-align-right {
    float: right;
    margin-left: var(--ck-image-style-spacing);
}

.image-style-block-align-right {
    margin-right: 0;
    margin-left: auto;
}

.image-style-block-align-left {
    margin-left: 0;
    margin-right: auto;
}

/* Simulates margin collapsing with the preceding paragraph, which does not work for the floating elements. */
p + .image-style-align-left,
p + .image-style-align-right,
p + .image-style-side {

}

.image-style-align-left,
.image-style-align-right {
    margin-top: var(--ck-inline-image-style-spacing);
    margin-bottom: var(--ck-inline-image-style-spacing);
}

.image-style-align-left {
    margin-right: var(--ck-inline-image-style-spacing);
}

.image-style-align-right {
    margin-left: var(--ck-inline-image-style-spacing);
}

/*caption*/
.image > figcaption {
    display: table-caption;
    caption-side: bottom;
    word-break: break-word;
    color: var(--ck-color-image-caption-text);
    background-color: var(--ck-color-image-caption-background);
    padding: .6em;
    font-size: .75em;
    outline-offset: -1px;
}

.image img {
    /* Prevent unnecessary margins caused by line-height (see #44). */
    display: block;

    /* Center the image if its width is smaller than the content's width. */
    margin: 0 auto;

    /* Make sure the image never exceeds the size of the parent container (ckeditor/ckeditor5-ui#67). */
    max-width: 100%;

    /* Make sure the image is never smaller than the parent container (See: https://github.com/ckeditor/ckeditor5/issues/9300). */
    min-width: 100%;

    /* Keep proportions of the block image if the height is set and the image is wider than the editor width.
    See https://github.com/ckeditor/ckeditor5/issues/14542. */
    height: auto;
}

.image .image-inline {
    /*
     * Normally, the .image-inline would have "display: inline-block" and "img { width: 100% }" (to follow the wrapper while resizing).
     * Unfortunately, together with "srcset", it gets automatically stretched up to the width of the editing root.
     * This strange behavior does not happen with inline-flex.
     */
    display: inline-flex;

    /* While being resized, don't allow the image to exceed the width of the editing root. */
    max-width: 100%;

    /* This is required by Safari to resize images in a sensible way. Without this, the browser breaks the ratio. */
    align-items: flex-start;

    /* When the picture is present it must act as a flex container to let the img resize properly */
}

.image .image-inline picture {
    display: flex;
}

.image .image-inline picture, .image .image-inline img {
    /* This is necessary for the img to span the entire .image-inline wrapper and to resize properly. */
    flex-grow: 1;
    flex-shrink: 1;

    /* Prevents overflowing the editing root boundaries when an inline image is very wide. */
    max-width: 100%;
}