.wave {
  position: relative;
  overflow: hidden;
  height: var(--wave-height);
  background: var(--paper);
}

.wave-svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: var(--wave-fill);
}

.wave-svg-bottom {
  transform: rotate(180deg);
}

.wave-fill-soft {
  opacity: var(--wave-fill-soft-opacity);
}

.wave-fill-mid {
  opacity: var(--wave-fill-mid-opacity);
}

.wave-section {
  margin-bottom: 0;
  background: linear-gradient(to bottom, var(--paper), var(--mist));
}

.wave-section-mirror .wave-svg {
  transform: scaleY(-1);
  transform-origin: center;
}

.wave-section-main {
  margin-top: calc(var(--wave-height) * -0.35);
  margin-bottom: var(--space-xl);
}

.wave-break {
  height: var(--wave-break-height);
  margin-top: calc(var(--space-xl) * -1);
}

.wave-break .wave-svg {
  transform: scaleY(-1);
  transform-origin: center;
}