/* MIT License | Copyright (c) Stephan Ango (@kepano) */

/* Invert  */

// Necessary to set background for screen/multiply to work
div[src$="#blend"],
div[src$="#invert"] {
  background-color: var(--background-primary);
}

.theme-dark {
  img[src$="#invert"],
  div[src$="#invert"] img,
  span[src$="#invert"] img {
    mix-blend-mode: screen;
    filter: invert(1) hue-rotate(180deg);
  }
  img[src$="#blend"],
  div[src$="#blend"] img,
  span[src$="#blend"] img {
    mix-blend-mode: screen;
  }
  .img-blend {
    mix-blend-mode: screen;
  }
}

.theme-light {
  img[src$="#blend"],
  div[src$="#blend"] img,
  span[src$="#blend"] img {
    mix-blend-mode: multiply;
  }
  img[src$="#invertW"],
  div[src$="#invertW"] img,
  span[src$="invertW"] img {
    filter: invert(1) hue-rotate(180deg);
  }
  .img-blend {
    mix-blend-mode: multiply;
  }
}

/* Circle */
img[src$="#circle"]:not(.emoji),
span[src$="#circle"] img:not(.emoji),
span[src$="#round"] img:not(.emoji) {
  border-radius: 50%;
  aspect-ratio: 1/1;
}

/* Outline */
img[src$="#outline"],
div[src$="#outline"] img,
span[src$="#outline"] img {
  border: var(--border-width) solid var(--background-modifier-border);
}

/* Interface */
img[src$="#interface"],
span[src$="#interface"] img {
  box-shadow: var(--shadow-s);
  border: var(--border-width) solid var(--background-modifier-border);
}
