details lazy embed

<details class="dembed">
	<summary webc:if="preview" :style="aspectRatioBackground(preview)" class="dembed-preview"></summary>
	<summary webc:else @text="``"><span>click to load <span class="dembed-title" @text="title"></span> embed</span></summary>
	<slot><iframe loading="lazy" :src="src"></iframe></slot>
</details>
<style webc:is="css.dembed" webc:nokeep></style>

<details class="dembed" style="pointer-events: auto;">
  <summary style="pointer-events: auto;">
    <span>
      click to load <span class="dembed-title">are.na</span> embed
    </span>
  </summary>
  <iframe
    loading="lazy"
    src="https://www.are.na/mmmeon/s-t-o-r-i-e-s/embed"
  ></iframe>
</details>

.dembed {
	cursor: pointer;
	width: 100%;
	display: grid;
	background: var(--mix-1);
	border: 1px solid var(--mix-2);
	summary {
		grid-area: 1 / 1 / 2 / 2;
		aspect-ratio: 1 / 1;
		z-index: var(--z-up);
		display: grid;
		align-items: center;
		text-align: center;
		border: 0px dashed var(--mix-2);
		opacity: 1;
		visibility: visible;
		> span {
			margin: .5em;
		}
	}
	summary.dembed-preview {
		background-size: cover;
	}
	&[open] summary.dembed-preview {
  	transition: opacity 200ms ease-in, visibility 0ms ease-in 200ms;
	}
	&:hover {
		border: 1px solid var(--mix-3);
		transition: border 200ms ease-in-out;
		summary {
			border: 3px dashed var(--mix-2);
			transition: border 200ms ease-in-out;
		}
	}
	&::details-content {
		grid-area: 1 / 1 / 2 / 2;
	}
	@supports not selector(::details-content) {
		& > *:not(summary) {
			grid-area: 1 / 1 / 2 / 2;
		}
	}
	&[open] summary {
		visibility: hidden;
		opacity: 0;
	}
	.dembed-title {
		font-size: var(--s2);
	}
	iframe {
		width: 100%;
		height: 100%;
		border: 0;
	}
}