/* Background is isolated inside its own section, above the section background. */
.svg-line__host { isolation: isolate; }
.svg-line__host--relative { position: relative; }
.svg-line.svg-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  user-select: none;
  overflow: hidden;
}
/* Low specificity keeps native Bricks controls and responsive overrides in charge. */
:where(.svg-line) {
  --th-line-stroke: 4;
  --th-line-color: var(--primary-l-4, #b5c6b8);
  --th-line-dash: 15;
  --th-line-gap: 15;
  --th-line-height: 290px;
  --th-wave-strength: 100%;
  --th-line-width: 100%;
  --th-line-x: 50%;
  --th-line-y: 50%;
  --th-line-shift-y: 0px;
  --th-icon-count: 6;
  --th-icon-size: 42px;
  --th-icon-color: var(--primary, #37664a);
  --th-icon-start: 5;
  --th-icon-end: 5;
  --th-icon-offset: 0px;
  --th-line-duration: 2;
}
.svg-line__drawing {
  position: absolute;
  width: var(--th-line-width);
  height: var(--th-line-height);
  left: var(--th-line-x);
  top: calc(var(--th-line-y) + var(--th-line-shift-y));
  transform: translate(-50%, -50%);
}
.svg-line__drawing > svg { position: absolute; top: 50%; transform: translateY(-50%); width: 100%; height: max(1px, var(--th-wave-strength)); overflow: visible; display: block; }
.svg-line__path {
  fill: none;
  stroke: var(--th-line-color);
  stroke-width: var(--th-line-stroke);
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: var(--th-line-dash) var(--th-line-gap);
}
.svg-line[data-th-line-style="solid"] .svg-line__path { stroke-dasharray: none; }
.svg-line__icons { position: absolute; inset: 0; }
.svg-line__icon {
  position: absolute;
  width: var(--th-icon-size);
  height: var(--th-icon-size);
  color: var(--th-icon-color);
  transform: translate(-50%, -50%) rotate(var(--th-icon-angle, 0deg));
}
.svg-line__icon > svg { display: block; width: 100%; height: 100%; overflow: visible; }