/* components/image: an image in the text, floated right (the default) or left, or centred, at --image-width
   of its container (a style attribute sets it per image); the image is a button that opens the enlarged
   view, a modal <dialog> that fills the browser window: the image fitted into it, the description under it
   and the close button last. */
@layer components {
	.dv-image {
		float: inline-end;
		inline-size: var(--image-width);
		margin: 0 0 var(--space-3) var(--space-3);
	}

	.dv-image--left {
		float: inline-start;
		margin-inline: 0 var(--space-3);
	}

	.dv-image--center {
		float: none;
		margin-inline: auto;
	}

	.dv-image-figure {
		float: none;
		inline-size: 100%;
		margin: 0;
	}

	.dv-image-open {
		display: block;
		inline-size: 100%;
		padding: 0;
		border: 0;
		background: none;
		cursor: zoom-in;
	}

	.dv-image-open:focus-visible {
		outline: var(--focus-outline-width) solid var(--color-focus-outline);
		outline-offset: var(--focus-outline-offset);
	}

	.dv-image-picture {
		display: block;
		inline-size: 100%;
		block-size: auto;
	}

	.dv-image-caption {
		margin-block-start: var(--space-2);
	}

	.dv-image-dialog {
		box-sizing: border-box;
		inline-size: 100vw;
		block-size: 100dvh;
		max-inline-size: 100vw;
		max-block-size: 100dvh;
		margin: 0;
		padding: var(--space-3);
		border: 0;
		color: var(--color-text);
		background: var(--color-background);
	}

	.dv-image-dialog[open] {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-3);
	}

	.dv-image-view {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		align-items: center;
		gap: var(--space-2);
		min-block-size: 0;
		inline-size: 100%;
		float: none;
		margin: 0;
	}

	.dv-image-full {
		flex: 1 1 auto;
		min-block-size: 0;
		inline-size: auto;
		max-inline-size: 100%;
		object-fit: contain;
	}

	.dv-image-description {
		flex: none;
		text-align: center;
	}

	.dv-image-close {
		flex: none;
		padding: var(--space-2) var(--space-3);
		font: inherit;
		color: var(--color-on-primary);
		background: var(--color-primary);
		border: 2px solid var(--color-primary);
		cursor: pointer;
	}

	.dv-image-close:hover {
		color: var(--color-on-primary-hover);
		background: var(--color-primary-hover);
	}

	.dv-image-close:focus-visible {
		outline: var(--focus-outline-width) solid var(--color-focus-outline);
		outline-offset: var(--focus-outline-offset);
	}

	@media (width < 768px) {
		.dv-image,
		.dv-image--left {
			float: none;
			inline-size: 100%;
			margin-inline: 0;
		}
	}

	@media (forced-colors: active) {
		.dv-image-close {
			border-color: ButtonText;
		}
	}
}