.block-tip {
	background-color: var(--wp--preset--color--quaternary);
	padding: 24px 24px 40px;
}

.block-tip.has-background,
.editor-styles-wrapper .block-tip.has-background {
	padding: 24px 24px 40px;
	position: relative;
}

.block-tip,
.block-tip.has-background,
.editor-styles-wrapper .block-tip.has-background,
.entry-content > .block-tip.has-background {
	margin-bottom: calc( 36px + var(--wp--custom--layout--block-gap) );
}

.block-tip.has-quaternary-background-color a:where(:not(.wp-element-button)),
.editor-styles-wrapper .block-tip.has-quaternary-background-color a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--primary);
}

.block-tip::after {
	-webkit-mask-image: url("icons/logomark.svg");
	-webkit-mask-position: 50% 50%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-image: url("icons/logomark.svg");
	mask-position: 50% 50%;
	mask-repeat: no-repeat;
	mask-size: contain;
	background-color: var(--tip-icon-color, var(--wp--preset--color--primary));
	content: '';
	display: block;
	width: 72px;
	height: 72px;
	position: absolute;
	right: -2px;
	bottom: -18px;
}

.block-tip.is-style-quick-tip::after {
	-webkit-mask-image: url("icons/quick-tip.svg");
	-webkit-mask-position: 75% 75%;
	-webkit-mask-size: 50px 50px;
	mask-image: url("icons/quick-tip.svg");
	mask-position: 75% 75%;
	mask-size: 50px 50px;
}
.block-tip.is-style-variations::after {
	-webkit-mask-image: url("icons/variations.svg");
	-webkit-mask-position: 50% 100%;
	-webkit-mask-size: 40px 40px;
	mask-image: url("icons/variations.svg");
	mask-position: 50% 100%;
	mask-size: 40px 40px;
}
.block-tip.is-style-storage::after {
	-webkit-mask-image: url("icons/storage.svg");
	-webkit-mask-size: 50px 50px;
	mask-image: url("icons/storage.svg");
	mask-size: 50px 50px;
}

@media only screen and (min-width: 768px) {
	.block-tip,
	.block-tip.has-background,
	.editor-styles-wrapper .block-tip.has-background {
		padding: 24px 40px 40px;
	}
}