/* Canonical Spark geometry and materials for every web, app and World surface. */
:where(ll-spark), :host {
  width: 28px; height: 28px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  overflow: visible;
  line-height: 0;
  isolation: isolate;
}
:host .layer, :host .fleck {
  position: absolute;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: var(--spark-mark-image);
  mask-image: var(--spark-mark-image);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transform-origin: center;
}
:host .layer { inset: 8% 11% 7% 9%; }
:where(ll-spark[size="xs"]), :host([size="xs"]) { width: 16px; height: 16px; }
:where(ll-spark[size="sm"]), :host([size="sm"]) { width: 22px; height: 22px; }
:where(ll-spark[size="md"]), :host([size="md"]) { width: 28px; height: 28px; }
:where(ll-spark[size="lg"]), :host([size="lg"]) { width: 40px; height: 40px; }
:where(ll-spark[size="full"]), :host([size="full"]) { width: 100%; height: 100%; }
:host .core {
  z-index: 2;
  background: var(--spark-fill);
  background-size: 150% 150%;
  background-position: 35% 40%;
}
:host .light {
  z-index: 3;
  opacity: calc(var(--spark-depth) * .7);
  background: radial-gradient(ellipse at 38% 28%, var(--spark-highlight), transparent 51%),
    linear-gradient(135deg, transparent 37%, var(--spark-highlight) 46%, transparent 51%);
  mix-blend-mode: screen;
}
:host .shade {
  z-index: 3;
  opacity: calc(var(--spark-depth) * .38);
  background: linear-gradient(135deg, transparent 42%, var(--spark-ink) 83%);
  mix-blend-mode: multiply;
}
:host .aura {
  z-index: 1;
  opacity: calc(var(--spark-depth) * .12);
  background: var(--spark-accent);
  filter: blur(5px);
  transform: scale(1.06);
}
:host .fleck {
  z-index: 4;
  width: calc(var(--fleck-size) * var(--spark-sparkle-scale));
  aspect-ratio: 1;
  background: var(--spark-satellite);
  opacity: var(--fleck-opacity, .85);
}
:host .fleck1 { --fleck-size: 22%; top: 5%; left: 2%; display: var(--spark-fleck-1); }
:host .fleck2 { --fleck-size: 14%; top: 19%; right: 0; display: var(--spark-fleck-2); }
:host .fleck3 { --fleck-size: 11%; bottom: 10%; right: 9%; display: var(--spark-fleck-3); --fleck-opacity: .65; }
:host .fleck4 { --fleck-size: 9%; bottom: 15%; left: 8%; display: var(--spark-fleck-4); --fleck-opacity: .6; }
:host .fleck5 { --fleck-size: 7%; top: 0; right: 18%; display: var(--spark-fleck-5); --fleck-opacity: .5; }
/* Preserve legibility without turning the mark into a cloud of subpixel particles. */
:host([size="xs"]) .fleck3, :host([size="xs"]) .fleck4, :host([size="xs"]) .fleck5, :host([size="sm"]) .fleck4, :host([size="sm"]) .fleck5 { display: none; }
:host([attention='unread']) .core,
:host([attention='unread']) .fleck { animation: sparkUnread 5.6s ease-in-out infinite; }
:host([attention='unread']) .fleck2 { animation-delay: -.7s; }
:host([expression='celebrating']):not([attention='unread']) .fleck { animation: sparkCelebrate .9s ease-out 1; }
@keyframes sparkUnread {
  0%, 100% { opacity: 1; transform: scale(1); filter: hue-rotate(0deg); }
  50% { opacity: calc(1 - var(--spark-motion) * .35); transform: scale(calc(1 + var(--spark-motion) * .08)); filter: hue-rotate(calc(var(--spark-motion) * 8deg)); }
}
@keyframes sparkCelebrate {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(calc(1 + var(--spark-motion) * .65)); }
}
@media (prefers-reduced-motion: reduce) {
  :host .core, :host .fleck { animation: none !important; }
}