.material-paper,
.material-paint,
.material-ink,
.material-wash {
  position: relative;
  isolation: isolate;
}

.material-paper::before,
.material-paint::before,
.material-ink::before,
.material-wash::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--material-opacity, .16);
  mix-blend-mode: var(--material-blend, multiply);
}

.material-paper::before {
  background:
    radial-gradient(circle at 17% 23%, currentColor 0 .45px, transparent .75px),
    radial-gradient(circle at 73% 61%, currentColor 0 .35px, transparent .7px),
    linear-gradient(96deg, transparent 32%, currentColor 50%, transparent 68%);
  background-size: 7px 9px, 11px 13px, 190px 100%;
  opacity: var(--material-opacity, .035);
}

.material-paint::before {
  background:
    linear-gradient(102deg, transparent 0 13%, rgba(255,255,255,.28) 31%, transparent 52%),
    repeating-linear-gradient(174deg, transparent 0 6px, rgba(255,255,255,.16) 7px, transparent 9px);
  background-size: 230px 100%, 100% 73px;
  opacity: var(--material-opacity, .19);
  mix-blend-mode: screen;
}

.material-ink::before {
  background:
    radial-gradient(ellipse at 21% 31%, transparent 0 .7px, currentColor .8px 2px, transparent 2.1px),
    radial-gradient(ellipse at 76% 66%, transparent 0 .45px, currentColor .55px 1.5px, transparent 1.6px);
  background-size: 19px 17px, 23px 29px;
  opacity: var(--material-opacity, .09);
  mix-blend-mode: screen;
}

.material-wash::before {
  background:
    radial-gradient(ellipse at 20% 50%, currentColor, transparent 48%),
    radial-gradient(ellipse at 82% 15%, currentColor, transparent 42%);
  filter: blur(12px);
  opacity: var(--material-opacity, .13);
}

.material-paper > *,
.material-paint > *,
.material-ink > *,
.material-wash > * {
  position: relative;
  z-index: 1;
}
