/*
  The picture with meme text laid over it. Font sizes are in container-width units so the
  preview scales with the picture the same way Meme::Renderer sizes text from image width.
  Keep these numbers in step with Meme::Renderer::STYLES.
*/
.meme-stage {
  position: relative;
  container-type: inline-size;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  line-height: 0;

  > img { display: block; width: 100%; height: auto; }
}

.meme-stage__text {
  position: absolute;
  left: 4%;
  right: 4%;
  margin: 0;
  color: #fff;
  text-align: center;
  overflow-wrap: anywhere;
  pointer-events: none;
  paint-order: stroke fill;
  -webkit-text-stroke-color: #000;
}

.meme-stage__text--top { top: 3%; }
.meme-stage__text--bottom { bottom: 3%; }

.meme-stage--caption .meme-stage__text {
  font-family: "Anton", Impact, sans-serif;
  font-size: 9cqw;
  line-height: 1.15;
  text-transform: uppercase;
  -webkit-text-stroke-width: 0.15em;
}

.meme-stage--subtitle .meme-stage__text {
  font-family: "Roboto Subtitle", Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: 6cqw;
  line-height: 1.25;
  -webkit-text-stroke-width: 0.2em;
}

/*
  Text boxes, for pictures with more than a top and bottom. Text starts at the size in
  Meme::Renderer::STYLES[:box] and the fit-text controller shrinks it to fit its box.
*/
.meme-stage__box {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}

.meme-stage__box-text {
  width: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0.08em 0;
  overflow: hidden;
  color: #fff;
  font-family: "Anton", Impact, sans-serif;
  font-size: 7cqw;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
  pointer-events: none;
  paint-order: stroke fill;
  -webkit-text-stroke: 0.15em #000;
}

/* While editing, empty boxes show where they are and what they're for. */
.editor .meme-stage__box { outline: 2px dashed rgb(255 255 255 / 0.75); box-shadow: 0 0 0 1px rgb(0 0 0 / 0.35); }
.editor .meme-stage__box--active { outline: 3px solid var(--accent); }
.editor .meme-stage__box-text:empty::before { content: attr(data-label); opacity: 0.6; font-size: 0.7em; }