/*
 * 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
 */

/* Preserve aspect ratio of the resized image after introducing image height attribute. */
.ck-content .image-inline img,
.ck-content img.image_resized {
	height: auto;
	aspect-ratio: 0 !important;
}

.ck-content figure.image {
    clear: both;
    display: table;
    margin-top: 0.9em;
	margin-bottom: 0.9em;
	margin-left:auto;
	margin-right:auto;
    min-width: 50px;
    text-align: center;
}

.ck-content .image.image_resized {
	max-width: 100%;
	/*
	The `<figure>` element for resized images must not use `display:table` as browsers do not support `max-width` for it well.
	See https://stackoverflow.com/questions/4019604/chrome-safari-ignoring-max-width-in-table/14420691#14420691 for more.
	Fortunately, since we control the width, there is no risk that the image will look bad.
	*/
	display: block;
	box-sizing: border-box;
	margin-top:0;
	margin-bottom:0;

	& img {
		/* For resized images it is the `<figure>` element that determines the image width. */
		width: 100%;
		height:auto;
		margin:0px auto;
		aspect-ratio: 0 !important;
	}

	& > figcaption {
		/* The `<figure>` element uses `display:block`, so `<figcaption>` also has to. */
		display: block;
	}
}

.ck.ck-editor__editable {
	/* The resized inline image nested in the table should respect its parent size.
	See https://github.com/ckeditor/ckeditor5/issues/9117. */
	& td,
	& th {
		& .image-inline.image_resized img {
			max-width: 100%;
		}
	}
}

[dir="ltr"] .ck.ck-button.ck-button_with-text.ck-resize-image-button .ck-button__icon {
	margin-right: var(--ck-spacing-standard);
}

[dir="rtl"] .ck.ck-button.ck-button_with-text.ck-resize-image-button .ck-button__icon {
	margin-left: var(--ck-spacing-standard);
}

.ck.ck-dropdown .ck-button.ck-resize-image-button .ck-button__label {
	width: 4em;
}