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

/* Image Block with Angled Corners */
.wp-block-image.is-style-angled-corners {
	position: relative;
	display: block;
}

/* Fix whitespace gap from anchor tag */
.wp-block-image.is-style-angled-corners a {
	display: block;
	line-height: 0;
}

/* Clip the image with angled corners (top-left & bottom-right) */
.wp-block-image.is-style-angled-corners img {
	display: block;
	border: none !important; /* Remove WordPress native border */
	clip-path: polygon(
		0 var(--corner-size),
		var(--corner-size) 0,
		100% 0,
		100% calc(100% - var(--corner-size)),
		calc(100% - var(--corner-size)) 100%,
		0 100%
	);
}

/* Add border using pseudo-element */
.wp-block-image.is-style-angled-corners::before {
	content: '';
	position: absolute;
	inset: calc(-1 * var(--corner-border-width));
	pointer-events: none;
	z-index: 1;
	background: var(--angled-border-color);
	clip-path: polygon(
		/* Outer path */
		0 calc(var(--corner-size) + var(--corner-border-width)),
		calc(var(--corner-size) + var(--corner-border-width)) 0,
		100% 0,
		100% calc(100% - var(--corner-size) - var(--corner-border-width)),
		calc(100% - var(--corner-size) - var(--corner-border-width)) 100%,
		0 100%,
		0 calc(var(--corner-size) + var(--corner-border-width)),
		/* Inner path */
		var(--corner-border-width) calc(var(--corner-size) + var(--corner-border-width) + 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) - 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) - var(--corner-border-width) * 0.5),
		calc(100% - var(--corner-border-width)) var(--corner-border-width),
		calc(var(--corner-size) + var(--corner-border-width) + var(--corner-border-width) * 0.5) var(--corner-border-width),
		var(--corner-border-width) calc(var(--corner-size) + var(--corner-border-width) + var(--corner-border-width) * 0.5)
	);
}

/* Border color variations - WordPress applies these classes to the img element */
/* Use :has() to set variable on parent figure when img has the color class */
.wp-block-image.is-style-angled-corners:has(img.has-primary-border-color) {
	--angled-border-color: var(--wp--preset--color--primary);
}

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

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

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

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

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

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

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

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

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

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