/* CSS-only picker previews are bundled to avoid one render-blocking request per background. */

.background-picker__preview--none::after {
  position: absolute;
  top: 50%;
  right: 1rem;
  left: 1rem;
  height: 1px;
  background: var(--color-border);
  content: "";
  transform: rotate(-12deg);
}

.background-picker__preview--lightfall {
  background-color: #03051c;
  background-image:
    linear-gradient(
      105deg,
      transparent 17%,
      rgb(166 200 255 / 0.9) 20%,
      transparent 23%
    ),
    linear-gradient(
      80deg,
      transparent 48%,
      rgb(82 39 255 / 0.9) 52%,
      transparent 56%
    ),
    linear-gradient(
      115deg,
      transparent 70%,
      rgb(255 159 252 / 0.9) 74%,
      transparent 78%
    ),
    radial-gradient(circle at 50% 78%, rgb(10 41 255 / 0.8), transparent 58%);
  background-size:
    100% 170%,
    100% 145%,
    100% 185%,
    100% 100%;
  box-shadow: inset 0 0 1.2rem rgb(82 39 255 / 0.4);
}

.background-picker__preview--galaxy {
  background-color: #111629;
  background-image:
    radial-gradient(
      circle at 72% 28%,
      rgb(255 255 255 / 0.9) 0 1px,
      transparent 1.5px
    ),
    radial-gradient(
      circle at 25% 65%,
      rgb(255 255 255 / 0.7) 0 1px,
      transparent 1.5px
    ),
    radial-gradient(
      circle at 48% 42%,
      rgb(167 139 250 / 0.8) 0 1px,
      transparent 1.5px
    ),
    radial-gradient(circle at 50% 80%, rgb(75 123 236 / 0.38), transparent 62%);
}

.background-picker__preview--light-pillar {
  overflow: hidden;
  background-color: #07040f;
  background-image:
    linear-gradient(
      115deg,
      transparent 29%,
      rgb(82 39 255 / 0.12) 38%,
      rgb(255 159 252 / 0.76) 47%,
      rgb(255 255 255 / 0.92) 50%,
      rgb(164 104 255 / 0.74) 53%,
      rgb(82 39 255 / 0.12) 62%,
      transparent 71%
    ),
    radial-gradient(circle at 54% 28%, rgb(82 39 255 / 0.46), transparent 46%),
    radial-gradient(circle at 46% 76%, rgb(255 159 252 / 0.34), transparent 50%);
  box-shadow:
    inset 0 0 1rem rgb(0 0 0 / 0.48),
    inset 0 0 0 1px rgb(255 255 255 / 0.08);
}

.background-picker__preview--line-waves {
  overflow: hidden;
  background-color: #08070d;
  background-image:
    repeating-linear-gradient(
      -35deg,
      transparent 0 0.28rem,
      rgb(255 255 255 / 0.88) 0.31rem 0.36rem,
      transparent 0.39rem 0.69rem
    ),
    radial-gradient(circle at 70% 32%, rgb(216 180 254 / 0.28), transparent 54%);
  background-size:
    145% 145%,
    100% 100%;
  background-position:
    50% 50%,
    center;
  box-shadow:
    inset 0 0 1rem rgb(0 0 0 / 0.42),
    inset 0 0 0 1px rgb(255 255 255 / 0.08);
}

.background-picker__preview--grainient {
  background-color: #16092d;
  background-image:
    radial-gradient(
      circle at 24% 26%,
      rgb(255 159 252 / 0.95),
      transparent 38%
    ),
    radial-gradient(circle at 74% 34%, rgb(82 39 255 / 0.95), transparent 46%),
    radial-gradient(circle at 48% 86%, rgb(180 151 207 / 0.9), transparent 44%),
    linear-gradient(135deg, #280b3a, #16092d);
  box-shadow: inset 0 0 1.1rem rgb(255 186 252 / 0.24);
}

.background-picker__preview--grainient::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-radial-gradient(
    circle at 40% 40%,
    rgb(255 255 255 / 0.2) 0 0.03rem,
    transparent 0.04rem 0.11rem
  );
  mix-blend-mode: soft-light;
  opacity: 0.65;
}

.background-picker__preview--ripple-grid {
  background-color: #080312;
  background-image:
    radial-gradient(circle at center, rgb(82 39 255 / 0.8), transparent 54%),
    repeating-linear-gradient(
      88deg,
      transparent 0 0.42rem,
      rgb(142 115 255 / 0.72) 0.46rem 0.5rem
    ),
    repeating-linear-gradient(
      2deg,
      transparent 0 0.42rem,
      rgb(142 115 255 / 0.72) 0.46rem 0.5rem
    );
  box-shadow: inset 0 0 1.3rem rgb(82 39 255 / 0.5);
}

.background-picker__preview--ripple-grid::after {
  content: "";
  position: absolute;
  inset: 12%;
  border: 1px solid rgb(231 225 255 / 0.8);
  border-radius: 50%;
  box-shadow:
    0 0 0.45rem rgb(154 128 255 / 0.9),
    inset 0 0 0.45rem rgb(154 128 255 / 0.7);
}

.background-picker__preview--floating-lines {
  background-color: #050713;
  background-image:
    radial-gradient(
      ellipse 95% 48% at 92% 8%,
      transparent 48%,
      rgb(233 69 245 / 0.9) 50%,
      transparent 53%
    ),
    radial-gradient(
      ellipse 105% 52% at 12% 48%,
      transparent 48%,
      rgb(150 143 178 / 0.82) 50%,
      transparent 53%
    ),
    radial-gradient(
      ellipse 105% 48% at 82% 92%,
      transparent 48%,
      rgb(106 106 106 / 0.82) 50%,
      transparent 53%
    ),
    linear-gradient(135deg, rgb(47 75 192 / 0.25), transparent 54%);
  box-shadow: inset 0 0 1.2rem rgb(233 69 245 / 0.25);
}