/**
 * Group Block - Angled Corners Style
 * Based on CSS-Tricks: https://css-tricks.com/cut-corners-using-css-mask-and-clip-path-properties/
 */

/* Group Block with Angled Corners (Border-only version) */
.wp-block-group.is-style-angled-corners {
	position: relative;
	padding: calc(var(--corner-size) / 2);
	border: none !important;
	/* Default border color - can be overridden by WordPress color classes */
	--angled-border-color: var(--wp--preset--color--primary);
}

/* Create border using pseudo-element with clip-path */
.wp-block-group.is-style-angled-corners::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background: var(--angled-border-color);
	/* Clip-path for border-only angled cut (top-left & bottom-right corners) */
	clip-path: polygon(
		/* Outer path - clockwise from left edge */
		0 var(--corner-size),
		var(--corner-size) 0,
		100% 0,
		100% calc(100% - var(--corner-size)),
		calc(100% - var(--corner-size)) 100%,
		0 100%,
		0 var(--corner-size),
		/* Inner path - counter-clockwise to create border hole */
		var(--corner-border-width) calc(var(--corner-size) + var(--corner-border-width) * 0.5),
		var(--corner-border-width) calc(100% - var(--corner-border-width)),
		calc(100% - var(--corner-size) - var(--corner-border-width) * 0.5) calc(100% - var(--corner-border-width)),
		calc(100% - var(--corner-border-width)) calc(100% - var(--corner-size) - var(--corner-border-width) * 0.5),
		calc(100% - var(--corner-border-width)) var(--corner-border-width),
		calc(var(--corner-size) + var(--corner-border-width) * 0.5) var(--corner-border-width),
		var(--corner-border-width) calc(var(--corner-size) + var(--corner-border-width) * 0.5)
	);
}

/* Ensure content sits above the border */
.wp-block-group.is-style-angled-corners > * {
	position: relative;
	z-index: 1;
}

/* Border color variations */
.wp-block-group.is-style-angled-corners.has-primary-border-color {
	--angled-border-color: var(--wp--preset--color--primary);
}

.wp-block-group.is-style-angled-corners.has-primary-accent-border-color {
	--angled-border-color: var(--wp--preset--color--primary-accent);
}

.wp-block-group.is-style-angled-corners.has-primary-alt-border-color {
	--angled-border-color: var(--wp--preset--color--primary-alt);
}

.wp-block-group.is-style-angled-corners.has-primary-alt-accent-border-color {
	--angled-border-color: var(--wp--preset--color--primary-alt-accent);
}

.wp-block-group.is-style-angled-corners.has-main-border-color {
	--angled-border-color: var(--wp--preset--color--main);
}

.wp-block-group.is-style-angled-corners.has-main-accent-border-color {
	--angled-border-color: var(--wp--preset--color--main-accent);
}

.wp-block-group.is-style-angled-corners.has-base-border-color {
	--angled-border-color: var(--wp--preset--color--base);
}

.wp-block-group.is-style-angled-corners.has-secondary-border-color {
	--angled-border-color: var(--wp--preset--color--secondary);
}

.wp-block-group.is-style-angled-corners.has-tertiary-border-color {
	--angled-border-color: var(--wp--preset--color--tertiary);
}

.wp-block-group.is-style-angled-corners.has-border-light-border-color {
	--angled-border-color: var(--wp--preset--color--border-light);
}

.wp-block-group.is-style-angled-corners.has-border-dark-border-color {
	--angled-border-color: var(--wp--preset--color--border-dark);
}