/* inkPad / Image */

.inkpad-scope .inkpad-image,
.editor-styles-wrapper .inkpad-image {
	--inkpad-image-radius: 0;
	--inkpad-image-shadow: none;
	--inkpad-image-fit: cover;
	box-sizing: border-box;
	display: block;
	max-width: 100%;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: var(--inkpad-space-sm, 1rem);
	margin-left: 0;
	background: transparent;
	background-color: transparent;
	color: inherit;
	text-align: left;
}

.inkpad-scope .inkpad-image__link,
.editor-styles-wrapper .inkpad-image__link {
	display: inline-block;
	max-width: 100%;
	color: inherit;
	text-decoration: none;
}

.inkpad-scope .inkpad-image__media,
.editor-styles-wrapper .inkpad-image__media {
	display: inline-flex;
	max-width: 100%;
	background: transparent;
	background-color: transparent;
	vertical-align: top;
}

.inkpad-scope .inkpad-image__frame,
.editor-styles-wrapper .inkpad-image__frame {
	box-sizing: border-box;
	display: inline-grid;
	max-width: 100%;
	overflow: hidden;
	background: transparent;
	background-color: transparent;
	border-radius: var(--inkpad-image-radius);
	box-shadow: var(--inkpad-image-shadow);
	vertical-align: top;
}

.inkpad-scope .inkpad-image__img,
.editor-styles-wrapper .inkpad-image__img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	background: transparent;
	background-color: transparent;
}

.inkpad-scope .inkpad-image--aspect-original .inkpad-image__link,
.inkpad-scope .inkpad-image--aspect-original .inkpad-image__media,
.inkpad-scope .inkpad-image--aspect-original .inkpad-image__frame,
.editor-styles-wrapper .inkpad-image--aspect-original .inkpad-image__link,
.editor-styles-wrapper .inkpad-image--aspect-original .inkpad-image__media,
.editor-styles-wrapper .inkpad-image--aspect-original .inkpad-image__frame {
	width: auto;
	max-width: 100%;
}

.inkpad-scope .inkpad-image--aspect-original .inkpad-image__img,
.editor-styles-wrapper .inkpad-image--aspect-original .inkpad-image__img {
	width: auto;
	max-width: 100%;
	height: auto;
}

.inkpad-scope .inkpad-image--align-left,
.editor-styles-wrapper .inkpad-image--align-left {
	text-align: left;
}

.inkpad-scope .inkpad-image--align-center,
.editor-styles-wrapper .inkpad-image--align-center {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.inkpad-scope .inkpad-image--align-right,
.editor-styles-wrapper .inkpad-image--align-right {
	text-align: right;
	margin-left: auto;
}

.inkpad-scope .inkpad-image--align-wide,
.editor-styles-wrapper .inkpad-image--align-wide {
	width: 100%;
	max-width: min(100%, var(--inkpad-container-width, 64rem));
	margin-left: auto;
	margin-right: auto;
}

.inkpad-scope .inkpad-image--align-full,
.editor-styles-wrapper .inkpad-image--align-full {
	width: 100%;
	max-width: none;
}

.inkpad-scope .inkpad-image--align-wide .inkpad-image__link,
.inkpad-scope .inkpad-image--align-wide .inkpad-image__media,
.inkpad-scope .inkpad-image--align-wide .inkpad-image__frame,
.inkpad-scope .inkpad-image--align-wide .inkpad-image__img,
.inkpad-scope .inkpad-image--align-full .inkpad-image__link,
.inkpad-scope .inkpad-image--align-full .inkpad-image__media,
.inkpad-scope .inkpad-image--align-full .inkpad-image__frame,
.inkpad-scope .inkpad-image--align-full .inkpad-image__img,
.editor-styles-wrapper .inkpad-image--align-wide .inkpad-image__link,
.editor-styles-wrapper .inkpad-image--align-wide .inkpad-image__media,
.editor-styles-wrapper .inkpad-image--align-wide .inkpad-image__frame,
.editor-styles-wrapper .inkpad-image--align-wide .inkpad-image__img,
.editor-styles-wrapper .inkpad-image--align-full .inkpad-image__link,
.editor-styles-wrapper .inkpad-image--align-full .inkpad-image__media,
.editor-styles-wrapper .inkpad-image--align-full .inkpad-image__frame,
.editor-styles-wrapper .inkpad-image--align-full .inkpad-image__img {
	display: block;
	width: 100%;
}

.inkpad-scope .inkpad-image--aspect-square .inkpad-image__frame,
.editor-styles-wrapper .inkpad-image--aspect-square .inkpad-image__frame {
	aspect-ratio: 1 / 1;
}

.inkpad-scope .inkpad-image--aspect-4-3 .inkpad-image__frame,
.editor-styles-wrapper .inkpad-image--aspect-4-3 .inkpad-image__frame {
	aspect-ratio: 4 / 3;
}

.inkpad-scope .inkpad-image--aspect-3-2 .inkpad-image__frame,
.editor-styles-wrapper .inkpad-image--aspect-3-2 .inkpad-image__frame {
	aspect-ratio: 3 / 2;
}

.inkpad-scope .inkpad-image--aspect-16-9 .inkpad-image__frame,
.editor-styles-wrapper .inkpad-image--aspect-16-9 .inkpad-image__frame {
	aspect-ratio: 16 / 9;
}

.inkpad-scope .inkpad-image--aspect-portrait-3-4 .inkpad-image__frame,
.editor-styles-wrapper .inkpad-image--aspect-portrait-3-4 .inkpad-image__frame {
	aspect-ratio: 3 / 4;
}

.inkpad-scope .inkpad-image:not(.inkpad-image--aspect-original) .inkpad-image__link,
.inkpad-scope .inkpad-image:not(.inkpad-image--aspect-original) .inkpad-image__media,
.editor-styles-wrapper .inkpad-image:not(.inkpad-image--aspect-original) .inkpad-image__link,
.editor-styles-wrapper .inkpad-image:not(.inkpad-image--aspect-original) .inkpad-image__media {
	display: block;
	width: 100%;
}

.inkpad-scope .inkpad-image:not(.inkpad-image--aspect-original) .inkpad-image__frame,
.editor-styles-wrapper .inkpad-image:not(.inkpad-image--aspect-original) .inkpad-image__frame {
	position: relative;
	display: block;
	width: 100%;
}

.inkpad-scope .inkpad-image:not(.inkpad-image--aspect-original) .inkpad-image__img,
.editor-styles-wrapper .inkpad-image:not(.inkpad-image--aspect-original) .inkpad-image__img {
	position: absolute;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: var(--inkpad-image-fit);
}

.inkpad-scope .inkpad-image--fit-cover,
.editor-styles-wrapper .inkpad-image--fit-cover {
	--inkpad-image-fit: cover;
}

.inkpad-scope .inkpad-image--fit-contain,
.editor-styles-wrapper .inkpad-image--fit-contain {
	--inkpad-image-fit: contain;
}

.inkpad-scope .inkpad-image--radius-sm,
.editor-styles-wrapper .inkpad-image--radius-sm {
	--inkpad-image-radius: var(--inkpad-radius-sm, var(--inkpad-radius, 0.375rem));
}

.inkpad-scope .inkpad-image--radius-md,
.editor-styles-wrapper .inkpad-image--radius-md {
	--inkpad-image-radius: var(--inkpad-radius-md, var(--inkpad-radius, 0.625rem));
}

.inkpad-scope .inkpad-image--radius-lg,
.editor-styles-wrapper .inkpad-image--radius-lg {
	--inkpad-image-radius: var(--inkpad-radius-lg, var(--inkpad-radius, 0.875rem));
}

.inkpad-scope .inkpad-image--radius-xl,
.editor-styles-wrapper .inkpad-image--radius-xl {
	--inkpad-image-radius: var(--inkpad-radius-xl, var(--inkpad-radius-lg, var(--inkpad-radius, 1rem)));
}

.inkpad-scope .inkpad-image--radius-pill,
.editor-styles-wrapper .inkpad-image--radius-pill {
	--inkpad-image-radius: 999px;
}

.inkpad-scope .inkpad-image--shadow-sm,
.editor-styles-wrapper .inkpad-image--shadow-sm {
	--inkpad-image-shadow: var(--inkpad-shadow-sm, var(--inkpad-shadow, none));
}

.inkpad-scope .inkpad-image--shadow-md,
.editor-styles-wrapper .inkpad-image--shadow-md {
	--inkpad-image-shadow: var(--inkpad-shadow-md, var(--inkpad-shadow, none));
}

.inkpad-scope .inkpad-image--shadow-lg,
.editor-styles-wrapper .inkpad-image--shadow-lg {
	--inkpad-image-shadow: var(--inkpad-shadow-lg, var(--inkpad-shadow, none));
}

.inkpad-scope .inkpad-image--border .inkpad-image__frame,
.editor-styles-wrapper .inkpad-image--border .inkpad-image__frame {
	border: 1px solid color-mix(in srgb, var(--inkpad-color-text, var(--inkpad-text, currentColor)) 14%, transparent);
}

.inkpad-scope .inkpad-image__caption,
.editor-styles-wrapper .inkpad-image__caption {
	margin-top: var(--inkpad-space-xs, 0.5rem);
	background: transparent;
	background-color: transparent;
	color: inherit;
	font-size: var(--inkpad-font-sm, 0.875rem);
	line-height: var(--inkpad-line-height, 1.55);
	text-align: inherit;
}

.inkpad-scope .inkpad-image--caption-muted .inkpad-image__caption,
.editor-styles-wrapper .inkpad-image--caption-muted .inkpad-image__caption {
	color: var(--inkpad-color-text-muted, var(--inkpad-text-muted, currentColor));
}

.inkpad-scope .inkpad-image--caption-small .inkpad-image__caption,
.editor-styles-wrapper .inkpad-image--caption-small .inkpad-image__caption {
	font-size: var(--inkpad-font-sm, 0.8125rem);
	color: var(--inkpad-color-text-muted, var(--inkpad-text-muted, currentColor));
}

.inkpad-scope .inkpad-image--caption-align-left .inkpad-image__caption,
.editor-styles-wrapper .inkpad-image--caption-align-left .inkpad-image__caption {
	text-align: left;
}

.inkpad-scope .inkpad-image--caption-align-center .inkpad-image__caption,
.editor-styles-wrapper .inkpad-image--caption-align-center .inkpad-image__caption {
	text-align: center;
}

.inkpad-scope .inkpad-image--caption-align-right .inkpad-image__caption,
.editor-styles-wrapper .inkpad-image--caption-align-right .inkpad-image__caption {
	text-align: right;
}

.editor-styles-wrapper .inkpad-image__placeholder {
	display: flex;
	min-height: 12rem;
	align-items: center;
	justify-content: center;
	border: 1px dashed color-mix(in srgb, var(--inkpad-color-text, var(--inkpad-text, currentColor)) 22%, transparent);
	border-radius: var(--inkpad-radius-md, var(--inkpad-radius, 0.625rem));
	background: transparent;
	background-color: transparent;
}

.editor-styles-wrapper .inkpad-image__editor-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--inkpad-space-xs, 0.5rem);
	margin-top: var(--inkpad-space-xs, 0.5rem);
}