/* =callout */
.block-callout {
	position: relative;
}

.block-callout > *:last-child {
	margin-bottom: 0;
}

.block-callout p {
	margin-top: 0;
}

.block-callout h1,
.block-callout h2,
.block-callout h3,
.block-callout h4,
.block-callout h5,
.block-callout h6 {
	font-size: var(--wp--preset--font-size--huge);
	line-height: var(--wp--custom--line-height--tiny);
}

/* Sprinkle */
.block-callout.layout-beta {
	border-radius: 12px;
	border: 1px solid #EEEEEE;
	box-shadow: 2px 3px 6px 0 rgba(0,0,0,0.10);
	position: relative;
}

.block-callout.layout-beta::after { /* =accent */
	content: "";
	display: block;
	position: absolute;
	background: url(https://www.crazyforcrust.com/wp-content/themes/crazy-for-crust-2022/assets/icons/accents/sprinkles-callout.svg) no-repeat center;
	background-size: contain;
	right: calc( -1 * var(--wp--custom--layout--padding) );
	bottom: calc( -1 * var(--wp--custom--layout--padding) );
}

/* Monochromatic Sprinkle */
.block-callout.layout-gamma {
	border: 3px solid var(--wp--preset--color--secondary);
	box-shadow: 2px 3px 6px 0 rgba(0,0,0,0.10);
	position: relative;
}

.block-callout.layout-gamma::after { /* =accent */
	content: "";
	display: block;
	position: absolute;
	background: url(https://www.crazyforcrust.com/wp-content/themes/crazy-for-crust-2022/assets/icons/accents/sprinkles-callout-mono-opacity-20.svg) no-repeat center;
	background-size: contain;
	right: calc( -1 * var(--wp--custom--layout--padding) );
	bottom: calc( -1 * var(--wp--custom--layout--padding) );
}

/* Dark Pattern */
.block-callout.layout-delta {
	border-radius: 12px;
	background-image: url(https://www.crazyforcrust.com/wp-content/themes/crazy-for-crust-2022/assets/icons/accents/sprinkles-blue-opacity-20.svg); /* =pattern */
	background-size: 250px;
	background-repeat: repeat;
	background-blend-mode: multiply;
}

/* Icon */
.block-callout.layout-epsilon {
}

.block-callout.layout-epsilon .block-callout__icon {
	position: absolute;
}
/*
Icon .highlight color fills
alpha : Blue
beta : Dark Pink (primary)
gamma : Green
delta : Orange
epsilon : Purple (secondary)
zeta : Red
eta : Yellow
*/
.block-callout.layout-epsilon.icon-highlight-color-alpha .block-callout__icon .highlight {
	fill: var(--wp--custom--color--blue);
}
.block-callout.layout-epsilon.icon-highlight-color-beta .block-callout__icon .highlight {
	fill: var(--wp--preset--color--primary);
}
.block-callout.layout-epsilon.icon-highlight-color-gamma .block-callout__icon .highlight {
	fill: var(--wp--custom--color--green);
}
.block-callout.layout-epsilon.icon-highlight-color-delta .block-callout__icon .highlight {
	fill: var(--wp--custom--color--orange);
}
.block-callout.layout-epsilon.icon-highlight-color-epsilon .block-callout__icon .highlight {
	fill: var(--wp--preset--color--secondary);
}
.block-callout.layout-epsilon.icon-highlight-color-zeta .block-callout__icon .highlight {
	fill: var(--wp--custom--color--red);
}
.block-callout.layout-epsilon.icon-highlight-color-eta .block-callout__icon .highlight {
	fill: var(--wp--custom--color--yellow);
}

@media only screen and (max-width: 767px) {
	.block-callout {
		padding: 16px 16px 20px 16px;
	}

	.block-callout h1,
	.block-callout h2,
	.block-callout h3,
	.block-callout h4,
	.block-callout h5,
	.block-callout h6 {
		margin-bottom: 8px;
	}


	/* Sprinkle */
	.block-callout.layout-beta {
		padding-right: 34px;
	}
	.block-callout.layout-beta::after {
		width: 100px;
		height: 100px;
	}

	/* Monochromatic Sprinkle */
	.block-callout.layout-gamma {
		padding-right: 34px;
	}
	.block-callout.layout-gamma::after {
		width: 100px;
		height: 100px;
	}

	/* Icon */
	.block-callout.layout-epsilon {
		padding-top: 26px;
	}
	.block-callout.layout-epsilon .block-callout__icon {
		top: -20px;
		left: 14px;
		height: 48px;
		width: 48px;
	}

}

@media only screen and (min-width: 768px) {
	.block-callout {
		padding: 22px 32px 24px 32px;
	}

	/* Sprinkle */
	.block-callout.layout-beta {
		padding-right: 60px;
	}
	.block-callout.layout-beta::after {
		width: 132px;
		height: 132px;
	}

	/* Monochromatic Sprinkle */
	.block-callout.layout-gamma {
		padding-right: 60px;
	}
	.block-callout.layout-gamma::after {
		width: 132px;
		height: 132px;
	}

	/* Icon */
	.block-callout.layout-epsilon {
		padding-left: 46px;
		padding-right: 37px;
	}
	.block-callout.layout-epsilon .block-callout__icon {
		top: 20px;
		left: -28px;
	}

}