/* Anchoring is implied in most browsers, but we have to be specific about it for Safari otherwise it un-anchored on the way out. */
[popovertarget="tooltip-1"] {
  anchor-name: --tooltip-1;
}

[popover] {
  --timing: .66s;
  position-anchor: --tooltip-1;
  
  transition:
    var(--timing) opacity,
    var(--timing) rotate,
    /* Step 3: transition display with transition-behavior: allow-discrete */
    var(--timing) display allow-discrete,
    /* Step 4: keep the ::backdrop around until gone */
    var(--timing) overlay allow-discrete;
  transform-origin: top left;

  /* STATE: On the Way Out */
  /* Think: reverse order states */
  &:not(:popover-open) {
    opacity: 0;
    rotate: 10deg;
  }
  
  /* STATE: While Open */
  &:popover-open {
    --timing: 0.2s;
    opacity: 1;
    rotate: 3deg;
  }

  /* Note the placement for specificity. @starting-style doesn't have any specificity, so these need to come AFTER regular open styles. */
  /* Benefit for using = https://codepen.io/phaux/pen/RNrPNgG = "Interuptability" */
  @starting-style {
    &:popover-open {
      /* Step 5: styles before open. */
      /* STATE: On the Way In */
      opacity: 0;
      rotate: -3deg;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  [popover] {  
    transition:
      var(--timing) opacity,
      var(--timing) display allow-discrete,
      var(--timing) overlay allow-discrete;

    &, &:popover-open {
      rotate: 0deg;
    }
  }
}


@layer design {
  body {
    font-family: "DM Sans", sans-serif;
  }
  [popover] {
    font-family: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
    line-height: 23px;
    max-inline-size: 350px;
    border: 0;
    padding: 24px 20px 20px 50px;
    color: black;
    background-color: #fffacd;
    background-image:
      linear-gradient(to right, transparent 39px, #ff9999 39px, #ff9999 41px, transparent 41px),
      repeating-linear-gradient(transparent, transparent 22px, #91b3d9 22px, #91b3d9 23px);
    box-shadow: 0 0 12px lch(0 0 0 / 0.4);
  }
  blockquote {
    margin-inline: 1em;
    margin-block: 0;
    font-style: italic;
  }
  [popovertarget] {
    vertical-align: super;
    font-size: 70%;
    padding: 0 4px;
    border-radius: 10px;
    corner-shape: squircle;
  }
}