/**
 * Notched Corners
 *
 * Limitations:
 * The use of `clip-path` means borders, outline, and drop shadows will be cut off.
 *
 * `box-shadow: (...)` can be manually replaced with `filter: drop-shadow(...)`
 *
 * Notched borders need to be redrawn, perhaps using pseudo elements with matching backgrounds clipped to span the corner gap.
 */


/*! - Settings */

:root {
	--theme--notch-size:    50px;
	--theme--notch-incline: 1;  /* 0 to infinity */

	--theme--btn--notch-size:    1em;
	--theme--btn--notch-incline: var(--theme--notch-incline);

	--theme--img--notch-size:    80px;
	--theme--img--notch-incline: var(--theme--notch-incline);
}



/*! - General */

/* Directly applied element class */
[class*="theme--notched"],
/* Container class to notch all inner elements by default */
[class*="theme--notch-buttons"] .et_pb_button,
[class*="theme--notch-images"] .et_pb_image {
	clip-path: polygon(
		/* top left */
		calc(
			calc(
				var(--theme--notch--top-left, 0) * var(--theme--notch-size)
			)
		) 0,
		/* top right */
		calc(
			100% - calc(
				var(--theme--notch--top-right, 0) * var(--theme--notch-size)
			)
		) 0,
		/* right top */
		100% calc(
			calc(
				var(--theme--notch-incline) * calc(
					var(--theme--notch--top-right, 0) * var(--theme--notch-size)
				)
			)
		),
		/* right bottom */
		100% calc(
			100% - calc(
				var(--theme--notch-incline) * calc(
					var(--theme--notch--bottom-right, 0) * var(--theme--notch-size)
				)
			)
		),
		/* bottom right */
		calc(
			100% - calc(
				var(--theme--notch--bottom-right, 0) * var(--theme--notch-size)
			)
		) 100%,
		/* bottom left */
		calc(
			var(--theme--notch--bottom-left, 0) * var(--theme--notch-size)
		) 100%,
		/* left bottom */
		0 calc(
			100% - calc(
				var(--theme--notch-incline) * calc(
					var(--theme--notch--bottom-left, 0) * var(--theme--notch-size)
				)
			)
		),
		/* left top */
		0 calc(
			var(--theme--notch-incline) * calc(
				var(--theme--notch--top-left, 0) * var(--theme--notch-size)
			)
		)
	);
}



/*! - Notch Directions */

/* Default all elements to zero'd notch direction properties, to prevent child notched items from also inheriting their parent's notch direction */
* {
	--theme--notch--top-left:     0;
	--theme--notch--top-right:    0;
	--theme--notch--bottom-left:  0;
	--theme--notch--bottom-right: 0;
}

.theme--notched--top-left,
.theme--notch-buttons--top-left .et_pb_button,
.theme--notch-images--top-left .et_pb_image {
	--theme--notch--top-left: 1;
}

.theme--notched--top-right,
.theme--notch-buttons--top-right .et_pb_button,
.theme--notch-images--top-right .et_pb_image {
	--theme--notch--top-right: 1;
}

.theme--notched--bottom-left,
.theme--notch-buttons--bottom-left .et_pb_button,
.theme--notch-images--bottom-left .et_pb_image {
	--theme--notch--bottom-left: 1;
}

.theme--notched--bottom-right,
.theme--notch-buttons--bottom-right .et_pb_button,
.theme--notch-images--bottom-right .et_pb_image {
	--theme--notch--bottom-right: 1;
}



/*! - Modifiers */

/*! Notch Removal */

/* Remove all notches from an element */
body .theme--notchless.theme--notchless {
	clip-path: none;
}

/* Remove individual notch directions */
body .theme--notchless--top-left.theme--notchless--top-left {
	--theme--notch--top-left: 0;
}

body .theme--notchless--top-right.theme--notchless--top-right {
	--theme--notch--top-right: 0;
}

body .theme--notchless--bottom-left.theme--notchless--bottom-left {
	--theme--notch--bottom-left: 0;
}

body .theme--notchless--bottom-right.theme--notchless--bottom-right {
	--theme--notch--bottom-right: 0;
}



/*! - Buttons */

.et_pb_button {
	--theme--notch-size:    var(--theme--btn--notch-size);
	--theme--notch-incline: var(--theme--btn--notch-incline);
}



/*! - Images */

.et_pb_image {
	--theme--notch-size:    var(--theme--img--notch-size);
	--theme--notch-incline: var(--theme--img--notch-incline);
}