/*
  Mini LQIP decoder.
  Usage:
    1) Set --lqip (or --my-lqip) on an element.
    2) Apply the .mini-lqip class.
*/

.mini-lqip {
  --lqip-source: var(--lqip, var(--my-lqip));

  --lqip-ca: mod(round(down, calc((var(--lqip-source) + 524288) / 262144)), 4);
  --lqip-cb: mod(round(down, calc((var(--lqip-source) + 524288) / 65536)), 4);
  --lqip-cc: mod(round(down, calc((var(--lqip-source) + 524288) / 16384)), 4);
  --lqip-cd: mod(round(down, calc((var(--lqip-source) + 524288) / 4096)), 4);
  --lqip-ce: mod(round(down, calc((var(--lqip-source) + 524288) / 1024)), 4);
  --lqip-cf: mod(round(down, calc((var(--lqip-source) + 524288) / 256)), 4);
  --lqip-ll: mod(round(down, calc((var(--lqip-source) + 524288) / 64)), 4);
  --lqip-aaa: mod(round(down, calc((var(--lqip-source) + 524288) / 8)), 8);
  --lqip-bbb: mod(calc(var(--lqip-source) + 524288), 8);

  --lqip-ca-clr: hsl(0 0% calc(var(--lqip-ca) / 3 * 60% + 20%));
  --lqip-cb-clr: hsl(0 0% calc(var(--lqip-cb) / 3 * 60% + 20%));
  --lqip-cc-clr: hsl(0 0% calc(var(--lqip-cc) / 3 * 60% + 20%));
  --lqip-cd-clr: hsl(0 0% calc(var(--lqip-cd) / 3 * 60% + 20%));
  --lqip-ce-clr: hsl(0 0% calc(var(--lqip-ce) / 3 * 60% + 20%));
  --lqip-cf-clr: hsl(0 0% calc(var(--lqip-cf) / 3 * 60% + 20%));
  --lqip-base-clr: oklab(
    calc(var(--lqip-ll) / 3 * 0.6 + 0.2)
    calc(var(--lqip-aaa) / 8 * 0.7 - 0.35)
    calc((var(--lqip-bbb) + 1) / 8 * 0.7 - 0.35)
  );

  background-image:
    radial-gradient(50% 75% at 16.67% 25%, var(--lqip-ca-clr), transparent),
    radial-gradient(50% 75% at 50% 25%, var(--lqip-cb-clr), transparent),
    radial-gradient(50% 75% at 83.33% 25%, var(--lqip-cc-clr), transparent),
    radial-gradient(50% 75% at 16.67% 75%, var(--lqip-cd-clr), transparent),
    radial-gradient(50% 75% at 50% 75%, var(--lqip-ce-clr), transparent),
    radial-gradient(50% 75% at 83.33% 75%, var(--lqip-cf-clr), transparent),
    linear-gradient(var(--lqip-base-clr), var(--lqip-base-clr));
}