/* Workingbox reusable background styles for Group/Section blocks. */

.is-style-wbx-bg-clean {
  position: relative;
  background: var(--wbx-color-white);
}

.is-style-wbx-bg-soft-mesh,
.is-style-wbx-bg-wide-waves {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.is-style-wbx-bg-soft-mesh {
  background:
    radial-gradient(44rem 24rem at 12% 18%, color-mix(in srgb, var(--wbx-color-violet) 22%, transparent), transparent 68%),
    radial-gradient(42rem 26rem at 88% 18%, color-mix(in srgb, var(--wbx-color-mint) 30%, transparent), transparent 70%),
    radial-gradient(40rem 24rem at 48% 96%, color-mix(in srgb, var(--wbx-color-coral) 22%, transparent), transparent 70%),
    linear-gradient(135deg, color-mix(in srgb, var(--wbx-color-violet) 7%, var(--wbx-color-white)), color-mix(in srgb, var(--wbx-color-mint) 9%, var(--wbx-color-white)) 58%, color-mix(in srgb, var(--wbx-color-coral) 7%, var(--wbx-color-white))),
    var(--wbx-color-white);
}

.is-style-wbx-bg-wide-waves {
  background: var(--wbx-color-white);
}

.is-style-wbx-bg-wide-waves::before {
  content: "";
  position: absolute;
  inset: clamp(8rem, 16vw, 15rem) -4% -9rem -4%;
  z-index: -1;
  background: url("../images/hero-waves.svg") right bottom / clamp(92rem, 118vw, 150rem) auto no-repeat;
  opacity: 0.86;
  pointer-events: none;
}

.is-style-wbx-bg-wide-waves::after {
  content: "";
  position: absolute;
  inset: 26% -10% -18% 18%;
  z-index: -1;
  background:
    radial-gradient(58rem 26rem at 76% 72%, color-mix(in srgb, var(--wbx-color-mint) 14%, transparent), transparent 76%),
    radial-gradient(52rem 22rem at 34% 86%, color-mix(in srgb, var(--wbx-color-violet) 10%, transparent), transparent 76%);
  opacity: 0.72;
  pointer-events: none;
}

.is-style-wbx-bg-soft-mesh > *,
.is-style-wbx-bg-wide-waves > * {
  position: relative;
}

@media (max-width: 47.999rem) {
  .is-style-wbx-bg-wide-waves::before {
    inset: auto -28% -8rem -30%;
    height: 55%;
    background-size: 78rem auto;
    opacity: 0.58;
  }

  .is-style-wbx-bg-wide-waves::after {
    inset: auto -22% -8rem 8%;
    height: 48%;
    opacity: 0.5;
  }
}