.block-tip {
	text-align: center;
}

.block-tip ul,
.block-tip ol {
	text-align: left;
}

.block-tip:where(:not([class*="is-style-"]))::before,
.block-tip:where(.is-style-default)::before {
	content: "";
	display: block;
	width: 60px;
	height: 60px;
	background-image: url('https://www.sugarhero.com/wp-content/themes/sugarhero-2023/assets/icons/logo/favicon.svg');
	margin: 0 auto 8px;
}

/* Border Style */

.block-tip.is-style-border {
	margin-block-start: 40px;
}

.block-tip.is-style-border.has-background,
.editor-styles-wrapper .block-tip.is-style-border.has-background {
	padding: 3px;
}

.block-tip.is-style-border.has-background .cwp-inner {
	color: var(--wp--preset--color--foreground);
}

.block-tip.is-style-border .cwp-inner {
	background-color: var(--wp--preset--color--background);
	padding: 24px;
}

.block-tip.is-style-border .block-tip__title:first-child {
	background-color: var(--wp--preset--color--background);
	width: fit-content;
	padding: 0 12px;
	margin-block-start: calc(-24px - 0.67em);
	margin-inline-start: auto;
	margin-inline-end: auto;
}

.block-tip.is-style-border .block-tip__title:first-child + * {
	margin-block-start: 8px;
}

/* Cupcake Style */

.block-tip.is-style-cupcake {
	margin-block-start: 66px;
	position: relative;
}

.block-tip.is-style-cupcake::before {
	content: "";
	display: block;
	background-color: inherit;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	margin-block-start: -90px;
	margin-inline-start: auto;
	margin-inline-end: auto;
}

.block-tip.is-style-cupcake::after {
	content: "";
	display: block;
	width: 70px;
	height: 70px;
	background-color: var(--wp--preset--color--senary);
	-webkit-mask-image: url('https://www.sugarhero.com/wp-content/themes/sugarhero-2023/assets/images/cupcake.png');
	-webkit-mask-position: 50% 50%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
}

.block-tip.is-style-cupcake.has-background-background-color::after,
.block-tip.is-style-cupcake.has-backdrop-background-color::after,
.block-tip.is-style-cupcake.has-quinary-background-color::after {
	background-color: var(--wp--preset--color--foreground);	
}
.block-tip.is-style-cupcake.has-foreground-background-color::after,
.block-tip.is-style-cupcake.has-senary-background-color::after {
	background-color: var(--wp--preset--color--background);
}
.block-tip.is-style-cupcake.has-primary-background-color::after,
.block-tip.is-style-cupcake.has-secondary-background-color::after {
	background-color: var(--wp--preset--color--pattern-secondary);
}
.block-tip.is-style-cupcake.has-tertiary-background-color::after {
	background-color: var(--wp--preset--color--pattern-tertiary);
}
.block-tip.is-style-cupcake.has-pattern-secondary-background-color::after {
	background-color: var(--wp--preset--color--secondary);
}
.block-tip.is-style-cupcake.has-pattern-tertiary-background-color::after {
	background-color: var(--wp--preset--color--tertiary);
}

/* Sprinkles Style */

.block-tip.is-style-sprinkles::before {
	content: "";
	display: block;
	width: 100%;
	height: 74px;
	background-image: url('https://www.sugarhero.com/wp-content/themes/sugarhero-2023/assets/images/sprinkles.png');
	background-repeat: repeat-x;
	background-size: 801px 74px;
	background-position: 50% 0%;
}

.block-tip.is-style-sprinkles.has-background,
.editor-styles-wrapper .block-tip.is-style-sprinkles.has-background {
	padding: 3px;
}

.block-tip.is-style-sprinkles .cwp-inner {
	background-color: var(--wp--preset--color--background);
	padding: 8px 24px 24px;
}

.block-tip.is-style-sprinkles.has-background .cwp-inner {
	color: var(--wp--preset--color--foreground);
}

.editor-styles-wrapper .wp-block-cwp-tip.has-background {
	padding: 0;
}

@media only screen and (min-width: 768px) {
	.block-tip.has-background,
	.editor-styles-wrapper .block-tip.has-background {
		padding: var(--wp--custom--layout--block-gap-large);
		padding-block-start: 24px;
	}

	.block-tip.is-style-cupcake::before,
	.editor-styles-wrapper .block-tip.is-style-cupcake::before {
		margin-block-start: -74px;
	}
}