.tassel-stats {
	align-items: center;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var( --wp--preset--spacing--container-x, 45px );
	margin-inline: auto;
	max-width: var( --tassel-stats-width, 100vw );
	padding: 0;
	width: 100%;
}

.tassel-stats[ data-animate-counters="true" ]:not( .is-counter-ready )
	.tassel-stat-card__value {
	visibility: hidden;
}

.tassel-stats.tassel-stats.alignfull {
	left: 50%;
	margin-inline: 0;
	max-width: var( --tassel-stats-width, 100vw );
	position: relative;
	transform: translateX( -50% );
	width: min( 100vw, var( --tassel-stats-width, 100vw ) );
}

.editor-styles-wrapper .tassel-stats.tassel-stats.alignfull {
	left: auto;
	margin-inline: calc( 50% - 50vw ) !important;
	max-width: var( --tassel-stats-width, 100vw ) !important;
	transform: none;
	width: min( 100vw, var( --tassel-stats-width, 100vw ) ) !important;
}

.editor-styles-wrapper
	.tassel-stats.tassel-stats.alignfull.is-preview-tablet {
	max-width: var(
		--tassel-stats-width-tablet,
		var( --tassel-stats-width, 100vw )
	) !important;
	width: min(
		100vw,
		var(
			--tassel-stats-width-tablet,
			var( --tassel-stats-width, 100vw )
		)
	) !important;
}

.editor-styles-wrapper
	.tassel-stats.tassel-stats.alignfull.is-preview-mobile {
	max-width: var(
		--tassel-stats-width-mobile,
		var( --tassel-stats-width-tablet, 100vw )
	) !important;
	width: min(
		100vw,
		var(
			--tassel-stats-width-mobile,
			var( --tassel-stats-width-tablet, 100vw )
		)
	) !important;
}

.editor-styles-wrapper .tassel-stats.tassel-stats.is-width-full {
	left: auto;
	margin-inline: calc( 50% - 50vw ) !important;
	max-width: none !important;
	transform: none;
	width: 100vw !important;
}

.tassel-stats__row {
	align-items: stretch;
	display: grid;
	gap: var( --tassel-stats-gap, 30px );
	grid-template-columns: repeat(
		var( --tassel-stats-columns, 4 ),
		minmax( 0, 1fr )
	);
	justify-content: center;
	margin: 0 auto;
	max-width: min(
		100%,
		var( --tassel-stats-row-max-width, 1490px )
	);
	padding: 0;
	width: 100%;
}

.editor-styles-wrapper
	.tassel-stats__row:has(> .block-editor-inner-blocks) {
	display: block;
}

.editor-styles-wrapper
	.tassel-stats__row
	> .block-editor-inner-blocks {
	width: 100%;
}

.editor-styles-wrapper
	.tassel-stats__row
	> .block-editor-inner-blocks
	> .block-editor-block-list__layout {
	align-items: stretch;
	display: grid;
	gap: var( --tassel-stats-gap, 30px );
	grid-template-columns: repeat(
		var( --tassel-stats-columns, 4 ),
		minmax( 0, 1fr )
	);
	width: 100%;
}

.editor-styles-wrapper
	.tassel-stats__row
	> .block-editor-inner-blocks
	> .block-editor-block-list__layout
	> .wp-block-epoch-stat-card {
	align-self: stretch;
	grid-column: auto;
	height: 100%;
	margin-block-start: 0;
	max-width: 100%;
	width: 100%;
}

.tassel-stats__cta {
	align-items: center;
	background: transparent;
	border: 1px solid var( --wp--preset--color--contrast, #000 );
	border-radius: var( --wp--custom--border-radius--button, 8px );
	box-sizing: border-box;
	color: var( --wp--preset--color--contrast, #000 );
	display: inline-flex;
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--button, 17px );
	font-weight: 600;
	justify-content: center;
	min-height: 42px;
	min-width: 75px;
	overflow: hidden;
	padding:
		var( --wp--preset--spacing--button-y, 8px )
		var( --wp--preset--spacing--button-x, 20px );
	position: relative;
	text-align: center;
	text-decoration: none;
	z-index: 0;
}

.tassel-stats__cta::before {
	background: var( --wp--preset--color--contrast, #000 );
	bottom: -3px;
	content: "";
	height: 2px;
	left: 50%;
	position: absolute;
	transform: translateX( -50% );
	transition: height 0.25s ease;
	width: calc( 100% + 10px );
	z-index: -1;
}

.tassel-stats__cta:hover,
.tassel-stats__cta:focus-visible {
	color: var( --wp--preset--color--base, #fff );
}

.tassel-stats__cta:hover::before,
.tassel-stats__cta:focus-visible::before {
	height: calc( 100% + 6px );
}

@media ( max-width: 1024px ) {
	.tassel-stats {
		max-width: var(
			--tassel-stats-width-tablet,
			var( --tassel-stats-width, 100vw )
		);
	}

	.tassel-stats.tassel-stats.alignfull {
		max-width: var(
			--tassel-stats-width-tablet,
			var( --tassel-stats-width, 100vw )
		);
		width: min(
			100vw,
			var(
				--tassel-stats-width-tablet,
				var( --tassel-stats-width, 100vw )
			)
		);
	}

	.tassel-stats__row {
		gap: var(
			--tassel-stats-gap-tablet,
			var( --tassel-stats-gap, 22px )
		);
		grid-template-columns: repeat(
			var(
				--tassel-stats-columns-tablet,
				var( --tassel-stats-columns, 2 )
			),
			minmax( 0, 1fr )
		);
		max-width: min(
			100%,
			var(
				--tassel-stats-row-max-width-tablet,
				var( --tassel-stats-row-max-width, 722px )
			)
		);
	}

	.editor-styles-wrapper
		.tassel-stats__row
		> .block-editor-inner-blocks
		> .block-editor-block-list__layout {
		gap: var(
			--tassel-stats-gap-tablet,
			var( --tassel-stats-gap, 22px )
		);
		grid-template-columns: repeat(
			var(
				--tassel-stats-columns-tablet,
				var( --tassel-stats-columns, 2 )
			),
			minmax( 0, 1fr )
		);
	}
}

@media ( max-width: 781px ) {
	.tassel-stats {
		max-width: var(
			--tassel-stats-width-mobile,
			var( --tassel-stats-width-tablet, 100vw )
		);
	}

	.tassel-stats.tassel-stats.alignfull {
		max-width: var(
			--tassel-stats-width-mobile,
			var( --tassel-stats-width-tablet, 100vw )
		);
		width: min(
			100vw,
			var(
				--tassel-stats-width-mobile,
				var( --tassel-stats-width-tablet, 100vw )
			)
		);
	}

	.tassel-stats__row {
		gap: var(
			--tassel-stats-gap-mobile,
			var( --tassel-stats-gap-tablet, 22px )
		);
		grid-template-columns: repeat(
			var(
				--tassel-stats-columns-mobile,
				var( --tassel-stats-columns-tablet, 1 )
			),
			minmax( 0, 1fr )
		);
		max-width: min(
			100%,
			var(
				--tassel-stats-row-max-width-mobile,
				var( --tassel-stats-row-max-width-tablet, 350px )
			)
		);
	}

	.editor-styles-wrapper
		.tassel-stats__row
		> .block-editor-inner-blocks
		> .block-editor-block-list__layout {
		gap: var(
			--tassel-stats-gap-mobile,
			var( --tassel-stats-gap-tablet, 22px )
		);
		grid-template-columns: repeat(
			var(
				--tassel-stats-columns-mobile,
				var( --tassel-stats-columns-tablet, 1 )
			),
			minmax( 0, 1fr )
		);
	}
}

.editor-styles-wrapper
	.tassel-stats.is-preview-tablet
	.tassel-stats__row,
.editor-styles-wrapper
	.tassel-stats.is-preview-tablet
	.tassel-stats__row
	> .block-editor-inner-blocks
	> .block-editor-block-list__layout {
	gap: var(
		--tassel-stats-gap-tablet,
		var( --tassel-stats-gap, 22px )
	);
	grid-template-columns: repeat(
		var(
			--tassel-stats-columns-tablet,
			var( --tassel-stats-columns, 2 )
		),
		minmax( 0, 1fr )
	);
	max-width: min(
		100%,
		var(
			--tassel-stats-row-max-width-tablet,
			var( --tassel-stats-row-max-width, 722px )
		)
	);
}

.editor-styles-wrapper
	.tassel-stats.is-preview-mobile
	.tassel-stats__row,
.editor-styles-wrapper
	.tassel-stats.is-preview-mobile
	.tassel-stats__row
	> .block-editor-inner-blocks
	> .block-editor-block-list__layout {
	gap: var(
		--tassel-stats-gap-mobile,
		var( --tassel-stats-gap-tablet, 22px )
	);
	grid-template-columns: repeat(
		var(
			--tassel-stats-columns-mobile,
			var( --tassel-stats-columns-tablet, 1 )
		),
		minmax( 0, 1fr )
	);
	max-width: min(
		100%,
		var(
			--tassel-stats-row-max-width-mobile,
			var( --tassel-stats-row-max-width-tablet, 350px )
		)
	);
}

@media ( prefers-reduced-motion: reduce ) {
	.tassel-stats__cta::before {
		transition: none;
	}
}