/**
 * Wavy Divider Component
 *
 * Horizontal wavy line that scales to any container width
 * while maintaining consistent visual thickness (~3px).
 *
 * Usage via PHP helper:
 *   kuladu_wavy_divider();           // Black
 *   kuladu_wavy_divider('primary');  // Green
 */

.kuladu-wavy-divider {
	/* Layout */
	width: 100%;
	height: auto;
	align-self: stretch;

	/* Spacing */
	margin: var(--space-6) 0; /* 24px top/bottom - default spacing */

	/* SVG sizing - fixed height for consistent thickness */
	svg {
		display: block;
		width: 100%;
		height: 3px; /* Fixed 3px height - do not scale vertically */
	}
}

/* Spacing Modifiers */
.kuladu-wavy-divider--tight {
	margin: var(--space-4) 0; /* 16px */
}

.kuladu-wavy-divider--loose {
	margin: var(--space-8) 0; /* 32px */
}

.kuladu-wavy-divider--none {
	margin: 0;
}

/* Responsive Spacing */
@media (min-width: 768px) {
	.kuladu-wavy-divider {
		margin: var(--space-8) 0; /* 32px on tablet+ */
	}

	.kuladu-wavy-divider--tight {
		margin: var(--space-6) 0; /* 24px on tablet+ */
	}

	.kuladu-wavy-divider--loose {
		margin: var(--space-10) 0; /* 40px on tablet+ */
	}
}