/*
  Reusable worn-fabric background overlay.
  Add class="distressed-fabric-bg" to the page body after linking this file.
*/

.distressed-fabric-bg {
  isolation: isolate;
}

.distressed-fabric-bg::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: multiply;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.08) 0 1px,
      transparent 1px 8px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.055) 0 1px,
      transparent 1px 10px
    );
  background-size:
    100% 100%,
    100% 100%;
  background-position:
    0 0,
    4px 3px;
}

.distressed-fabric-bg::after {
  content: none;
}

:root[data-theme="dark"] .distressed-fabric-bg::before {
  opacity: 0.12;
  mix-blend-mode: screen;
}