/**
 * TailwindCSS dither effect plugin.
 *
 * @author Florian Kiem <https://github.com/flornkm>
 * @license MIT
 */

@theme {
  --dither-cell-xs: 8px;
  --dither-cell-sm: 12px;
  --dither-cell-md: 16px;
  --dither-cell-lg: 20px;
  --dither-cell-xl: 28px;
  --dither-cell-2xl: 40px;

  /* Default bayer image as data URI */
  --dither-image-url: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAu0lEQVQ4T6WSMQqFMBBEE2wDXiVgG8gtglilCuIpcoogVqlEPIVgK3gVIa2Qzw9YbIpttlqGgbcMM5wxlr33LMbI/nccx3I/PQwD0LXPj+OgAaSUBWCtLZ+2bSv308uyAF37/HkeGkAIASL0fQ8yT9MEdO3z67poAKUUiDDPM8i87zvQtc/f96UBmqZBazTG4Ds4z5MG6LoOrTGEgO8gpUQDtG2L1uicw3dw3zcNoLVGa1zXFd9BzpkE+AFp94/4eKx9+AAAAABJRU5ErkJggg==");
}

@utility dither {
  --dither-gray: 1;
  --dither-contrast: 120;
  --dither-bright: 1;
  --dither-blur: 0px;
  --dither-cell: var(--dither-cell-lg);
  --dither-opacity: 1;
  --dither-image: var(--dither-image-url);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  z-index: 0;
  background: #000;

  filter:
    grayscale(var(--dither-gray))
    brightness(var(--dither-bright))
    blur(var(--dither-blur))
    contrast(var(--dither-contrast));

  &::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background-image: var(--dither-image);
    background-repeat: repeat;
    background-size: var(--dither-cell) var(--dither-cell);
    background-position: 0 0;
    image-rendering: pixelated;
    opacity: var(--dither-opacity);
    mix-blend-mode: screen;
  }
}

@utility dither-* {
  --dither-gray: 1;
  --dither-contrast: 120;
  --dither-bright: 1;
  --dither-blur: 0px;
  --dither-cell: --value(--dither-cell-*, number);
  --dither-opacity: 1;
  --dither-image: var(--dither-image-url);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  z-index: 0;
  background: #000;

  filter:
    grayscale(var(--dither-gray))
    brightness(var(--dither-bright))
    blur(var(--dither-blur))
    contrast(var(--dither-contrast));

  &::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background-image: var(--dither-image);
    background-repeat: repeat;
    background-size: var(--dither-cell) var(--dither-cell);
    background-position: 0 0;
    image-rendering: pixelated;
    opacity: var(--dither-opacity);
    mix-blend-mode: screen;
  }
}

@utility dither-none {
  filter: none !important;
  background: none !important;
  &::after { content: none !important; background: none !important; }
}
