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

/* Filled Angled Corners Button */
.wp-block-button.is-style-angled-corners-fill .wp-block-button__link {
	position: relative;
	border: none !important;
	border-radius: 0 !important;
	clip-path: polygon(
		0 calc(var(--corner-size) / 3),
		calc(var(--corner-size) / 3) 0,
		100% 0,
		100% calc(100% - var(--corner-size) / 3),
		calc(100% - var(--corner-size) / 3) 100%,
		0 100%
	);
}

/* Outline Angled Corners Button */
.wp-block-button.is-style-angled-corners-outline .wp-block-button__link {
	position: relative;
	border: none !important;
	border-radius: 0 !important;
	background-color: transparent !important;
	background-image: none !important;
}

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

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

/* Hover states */
.wp-block-button.is-style-angled-corners-fill .wp-block-button__link:hover,
.wp-block-button.is-style-angled-corners-outline .wp-block-button__link:hover {
	text-decoration: underline;
}