details lazy embed

<details class="dembed">
	<summary webc:if="preview" :style="`background-image: url(${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);
}
.dembed summary {
  grid-area: 1/1/2/2;
  aspect-ratio: 1/1;
  z-index: 1;
  display: grid;
  align-items: center;
  text-align: center;
  border: 0px dashed var(--mix-2);
  opacity: 1;
  visibility: visible;
}
.dembed summary.dembed-preview {
  background-size: cover;
}
.dembed[open] summary.dembed-preview {
  transition: opacity 200ms ease-in, visibility 0ms ease-in 200ms;
}
.dembed:hover {
  border: 1px solid var(--mix-3);
  transition: border 200ms ease-in-out;
}
.dembed:hover summary {
  border: 3px dashed var(--mix-2);
  transition: border 200ms ease-in-out;
}
.dembed::details-content {
  grid-area: 1/1/2/2;
}
.dembed[open] summary {
  visibility: hidden;
  opacity: 0;
}
.dembed .dembed-title {
  font-size: var(--s2);
}
.dembed iframe {
  width: 100%;
  height: 100%;
  border: 0;
}