/* Extends https://github.com/picocss/pico/tree/main/scss/utilities
<!--section:docs-->

### Auto-dark

`.dark-auto` automatically creates a simple dark version of any element:

<article data-theme="dark">
  <p>Look how cool <big class="dark-auto">🔥🕷️🐦‍⬛🐄🦓</big> can look in the dark!</p>
</article>

How it works:
```css */
/* Per https://picocss.com/docs/css-variables#css-variables-for-color-schemes */
:root {
  --blades-dark-filter: invert(100%) hue-rotate(180deg);
}
.dark-auto {
  /* Dark color scheme (Auto) */
  @media (prefers-color-scheme: dark) {
    filter: var(--blades-dark-filter);
  }
  /* Dark color scheme (Forced) */
  &[data-theme="dark"],
  &:where([data-theme="dark"] *) {
    filter: var(--blades-dark-filter);
  }
}
/*```

### Faded

`.faded` reduces the opacity of an element:

<article class="faded">
  Hover to unfade me!
</article>

How it works:
```css */
.faded {
  opacity: 50%;

  &:hover {
    opacity: 87.5%;
  }
}
/*```
<!--section--> */

/* Fix the scrollbar color when inverted by https://tailwindcss.com/docs/filter-invert */
.invert {
  ::-webkit-scrollbar {
    filter: invert(1) !important;
  }
}