/**
 * Custom Gutenberg group block styles.
 *
 * @package TheFlourNookCustom
 */

:root {
	--tfn-love-surface: var(--color-surface-brand-subtle, #fff6f2);
	--tfn-love-heart: var(--color-icon-primary, #e8513b);
	--tfn-tips-surface: var(--color-surface-secondary-subtle, #fff7e4);
	--tfn-tips-arrow: var(--color-icon-secondary, #fba32f);
	--tfn-group-text: var(--color-text-default, #2d2d2d);
	--tfn-group-heading-font: var(--font-heading, 'Blood Orange', Georgia, 'Times New Roman', serif);
	--tfn-group-heading-weight: var(--font-weight-heading, 700);
}

.wp-block-group:is(.is-style-love, .is-style-tips) {
	box-sizing: border-box;
	padding: 20px;
}

.wp-block-group.is-style-love {
	background-color: var(--tfn-love-surface);
}

.wp-block-group.is-style-tips {
	background-color: var(--tfn-tips-surface);
}

.wp-block-group:is(.is-style-love, .is-style-tips) > * {
	margin-top: 0;
	margin-bottom: 0;
}

.wp-block-group:is(.is-style-love, .is-style-tips) > * + * {
	margin-top: 16px;
}

.wp-block-group:is(.is-style-love, .is-style-tips) > * + .wp-block-paragraph {
	margin-top: 8px;
}

.wp-block-group:is(.is-style-love, .is-style-tips) :is(.wp-block-heading, h1, h2, h3, h4, h5, h6) {
	margin: 0;
	font-family: var(--tfn-group-heading-font);
	font-weight: var(--tfn-group-heading-weight);
	text-transform: lowercase;
	color: var(--tfn-group-text);
}

.wp-block-group:is(.is-style-love, .is-style-tips) :is(ul, ol) {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wp-block-group:is(.is-style-love, .is-style-tips) li {
	position: relative;
	margin: 0;
}

.wp-block-group:is(.is-style-love, .is-style-tips) li + li {
	margin-top: 8px;
}

.wp-block-group:is(.is-style-love, .is-style-tips) li > :is(ul, ol) {
	margin-top: 8px;
}

.wp-block-group.is-style-love li {
	padding-left: 1.75rem;
}

.wp-block-group.is-style-love li::before {
	content: '';
	position: absolute;
	top: 0.35em;
	left: 0;
	width: 16px;
	height: 14px;
	background-color: var(--tfn-love-heart);
	mask: url('../svg/love-heart.svg') no-repeat center / contain;
	-webkit-mask: url('../svg/love-heart.svg') no-repeat center / contain;
}

.wp-block-group.is-style-tips li {
	padding-left: 2rem;
}

.wp-block-group.is-style-tips li::before {
	content: '';
	position: absolute;
	top: 0.05em;
	left: 0;
	width: 24px;
	height: 24px;
	background-color: var(--tfn-tips-arrow);
	mask: url('../svg/tips-arrow.svg') no-repeat center / contain;
	-webkit-mask: url('../svg/tips-arrow.svg') no-repeat center / contain;
}