/**
 * Kwik Blocks — block enhancements (registered block styles).
 *
 * Opt-in via the editor "Styles" panel (registered server-side, no editor JS):
 *   - Section (advanced-columns): shape dividers (slant / slant-reverse / point)
 *   - Button: loading-on-click spinner
 *
 * @package Kwikonect\KwikBlocks
 */

/* --- Section shape dividers (clip the section's bottom edge) ----------------
 * CSS-only: the section background is cut, revealing the page/next section
 * below. Section padding keeps content clear of the cut. Divider depth is
 * themeable via --kwik-divider-size.
 */
.wp-block-kwikblocks-advanced-columns.is-style-kwik-divider-slant {
	--kwik-divider-size: 48px;
	clip-path: polygon( 0 0, 100% 0, 100% calc( 100% - var( --kwik-divider-size ) ), 0 100% );
}

.wp-block-kwikblocks-advanced-columns.is-style-kwik-divider-slant-reverse {
	--kwik-divider-size: 48px;
	clip-path: polygon( 0 0, 100% 0, 100% 100%, 0 calc( 100% - var( --kwik-divider-size ) ) );
}

.wp-block-kwikblocks-advanced-columns.is-style-kwik-divider-point {
	--kwik-divider-size: 48px;
	clip-path: polygon( 0 0, 100% 0, 100% 100%, 50% calc( 100% - var( --kwik-divider-size ) ), 0 100% );
}

@media ( max-width: 600px ) {
	.wp-block-kwikblocks-advanced-columns[class*="is-style-kwik-divider"] {
		--kwik-divider-size: 28px;
	}
}

/* --- Button: loading on click ----------------------------------------------- */
.wp-block-kwikblocks-button.is-style-kwik-loading.is-loading .wp-block-button__link,
.wp-block-kwikblocks-button.is-style-kwik-loading .wp-block-button__link.is-loading {
	color: transparent !important;
	pointer-events: none;
	position: relative;
}

.wp-block-kwikblocks-button.is-style-kwik-loading.is-loading .wp-block-button__link::after,
.wp-block-kwikblocks-button.is-style-kwik-loading .wp-block-button__link.is-loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1em;
	height: 1em;
	margin: -0.5em 0 0 -0.5em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	color: #fff;
	opacity: 0.9;
	animation: kwik-btn-spin 0.6s linear infinite;
}

@keyframes kwik-btn-spin {
	to { transform: rotate( 360deg ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.wp-block-kwikblocks-button.is-style-kwik-loading .wp-block-button__link::after {
		animation-duration: 0s;
	}
}