.tassel-stat-card {
	align-items: var( --tassel-stat-content-alignment, center );
	background: var(
		--tassel-stat-card-background,
		var( --wp--preset--color--secondary-extra-dark, #151515 )
	);
	border-radius: var( --wp--custom--border-radius--default, 12px );
	box-sizing: border-box;
	display: flex;
	height: auto;
	isolation: isolate;
	justify-content: center;
	justify-self: center;
	margin: 0;
	max-width: 100%;
	min-height: var( --tassel-stat-card-height, 475px );
	min-width: min( 200px, 100% );
	overflow: hidden;
	padding:
		var( --wp--preset--spacing--inner, 22px )
		var( --wp--preset--spacing--inner, 22px );
	position: relative;
	width: 100%;
}

.tassel-stats__row > .tassel-stat-card {
	grid-column: auto;
	height: 100%;
	margin-block-start: 0;
}

.tassel-stat-card__fill {
	background: var(
		--tassel-stat-card-hover-background,
		var( --wp--preset--color--primary, #19468d )
	);
	bottom: -5px;
	height: 1px;
	left: 50%;
	position: absolute;
	transform: translateX( -50% );
	transition: height 0.35s ease;
	width: calc( 100% + 16px );
	z-index: -1;
}

.tassel-stat-card__content {
	align-items: center;
	display: flex;
	flex-direction: column;
	position: relative;
	width: 100%;
	z-index: 1;
}

.tassel-stat-card__icon-frame {
	align-items: center;
	display: flex;
	justify-content: center;
	padding-bottom: 50px;
}

.tassel-stat-card__icon {
	align-items: center;
	color: var(
		--tassel-stat-icon-color,
		var( --wp--preset--color--base, #fff )
	);
	display: inline-flex;
	font-size: var( --tassel-stat-icon-size, 50px );
	height: var( --tassel-stat-icon-size, 50px );
	justify-content: center;
	width: var( --tassel-stat-icon-size, 50px );
}

.tassel-stat-card__icon i {
	font-size: 0.8em;
}

.tassel-stat-card__icon img {
	height: 80%;
	object-fit: contain;
	width: 100%;
}

.tassel-stat-card__divider {
	background: var(
		--tassel-stat-divider-color,
		var( --wp--preset--color--primary-light, #7ba6de )
	);
	display: block;
	height: 1px;
	transition: width 0.35s ease;
	width: 100px;
}

.tassel-stat-card__number {
	align-items: center;
	color: var( --tassel-stat-color, rgb( 255 255 255 / 0% ) );
	display: flex;
	font-family: var(
		--tassel-stat-font-family,
		var( --wp--preset--font-family--body )
	);
	font-size: var(
		--tassel-stat-font-size,
		var( --wp--preset--font-size--stat, 90px )
	);
	font-weight: var( --tassel-stat-font-weight, 700 );
	height: 133px;
	justify-content: center;
	letter-spacing: 0;
	line-height: var( --wp--custom--typography--line-height--stat, 1.15 );
	margin: 0;
	text-align: center;
	transition:
		color 0.25s ease,
		-webkit-text-stroke-color 0.25s ease;
	-webkit-text-stroke: 1px var( --wp--preset--color--base, #fff );
	width: 100%;
}

.tassel-stat-card__description {
	color: var(
		--tassel-stat-description-color,
		var( --wp--preset--color--base, #fff )
	);
	display: block;
	font-family: var(
		--tassel-description-font-family,
		var( --wp--preset--font-family--body )
	);
	font-size: var(
		--tassel-description-font-size,
		var( --wp--preset--font-size--body, 17px )
	);
	font-weight: var( --tassel-description-font-weight, 400 );
	line-height: var( --wp--custom--typography--line-height--body, 1.5 );
	margin: 0;
	margin-block: 0;
	padding-inline: var( --wp--preset--spacing--inner, 22px );
	text-align: center;
	word-break: break-word;
}

.tassel-stat-card__supporting-text {
	color: var(
		--tassel-stat-description-color,
		var( --wp--preset--color--base, #fff )
	);
	font-family: var(
		--tassel-description-font-family,
		var( --wp--preset--font-family--body )
	);
	font-size: var(
		--tassel-description-font-size,
		var( --wp--preset--font-size--body, 17px )
	);
	font-weight: 400;
	line-height: var( --wp--custom--typography--line-height--body, 1.5 );
	margin: 6px 0 0;
	padding-inline: var( --wp--preset--spacing--inner, 22px );
	text-align: center;
	word-break: break-word;
}

.tassel-stat-card:hover .tassel-stat-card__fill,
.tassel-stat-card:focus-within .tassel-stat-card__fill {
	height: calc( 100% + 10px );
}

.tassel-stat-card:hover .tassel-stat-card__divider,
.tassel-stat-card:focus-within .tassel-stat-card__divider {
	width: 100%;
}

.tassel-stat-card:hover .tassel-stat-card__number,
.tassel-stat-card:focus-within .tassel-stat-card__number {
	color: var(
		--tassel-stat-hover-color,
		var( --wp--preset--color--base, #fff )
	);
	-webkit-text-stroke-color: transparent;
}

@media ( max-width: 1024px ) {
	.tassel-stat-card {
		min-height: var(
			--tassel-stat-card-height-tablet,
			var( --tassel-stat-card-height, 475px )
		);
		max-width: 100%;
	}

	.tassel-stat-card__icon {
		font-size: var(
			--tassel-stat-icon-size-tablet,
			var( --tassel-stat-icon-size )
		);
		height: var(
			--tassel-stat-icon-size-tablet,
			var( --tassel-stat-icon-size )
		);
		width: var(
			--tassel-stat-icon-size-tablet,
			var( --tassel-stat-icon-size )
		);
	}

	.tassel-stat-card__number {
		font-size: var(
			--tassel-stat-font-size-tablet,
			var( --tassel-stat-font-size )
		);
	}

	.tassel-stat-card__description {
		font-size: var(
			--tassel-description-font-size-tablet,
			var( --tassel-description-font-size )
		);
	}

	.tassel-stat-card__supporting-text {
		font-size: var(
			--tassel-description-font-size-tablet,
			var( --tassel-description-font-size )
		);
	}
}

@media ( max-width: 781px ) {
	.tassel-stat-card {
		min-height: 0;
		max-width: 100%;
	}

	.tassel-stat-card__content {
		height: auto !important;
	}

	.tassel-stat-card__description {
		min-height: 0;
	}

	.tassel-stat-card__icon {
		font-size: var(
			--tassel-stat-icon-size-mobile,
			var( --tassel-stat-icon-size-tablet )
		);
		height: var(
			--tassel-stat-icon-size-mobile,
			var( --tassel-stat-icon-size-tablet )
		);
		width: var(
			--tassel-stat-icon-size-mobile,
			var( --tassel-stat-icon-size-tablet )
		);
	}

	.tassel-stat-card__number {
		font-size: var(
			--tassel-stat-font-size-mobile,
			var( --tassel-stat-font-size-tablet )
		);
	}

	.tassel-stat-card__description {
		font-size: var(
			--tassel-description-font-size-mobile,
			var( --tassel-description-font-size-tablet )
		);
	}

	.tassel-stat-card__supporting-text {
		font-size: var(
			--tassel-description-font-size-mobile,
			var( --tassel-description-font-size-tablet )
		);
	}
}

.editor-styles-wrapper
	.tassel-stats.is-preview-tablet
	.tassel-stat-card {
	min-height: var(
		--tassel-stat-card-height-tablet,
		var( --tassel-stat-card-height, 475px )
	);
}

.editor-styles-wrapper
	.tassel-stats.is-preview-tablet
	.tassel-stat-card__icon {
	font-size: var(
		--tassel-stat-icon-size-tablet,
		var( --tassel-stat-icon-size )
	);
	height: var(
		--tassel-stat-icon-size-tablet,
		var( --tassel-stat-icon-size )
	);
	width: var(
		--tassel-stat-icon-size-tablet,
		var( --tassel-stat-icon-size )
	);
}

.editor-styles-wrapper
	.tassel-stats.is-preview-tablet
	.tassel-stat-card__number {
	font-size: var(
		--tassel-stat-font-size-tablet,
		var( --tassel-stat-font-size )
	);
}

.editor-styles-wrapper
	.tassel-stats.is-preview-tablet
	.tassel-stat-card__description,
.editor-styles-wrapper
	.tassel-stats.is-preview-tablet
	.tassel-stat-card__supporting-text {
	font-size: var(
		--tassel-description-font-size-tablet,
		var( --tassel-description-font-size )
	);
}

.editor-styles-wrapper
	.tassel-stats.is-preview-mobile
	.tassel-stat-card {
	min-height: 0;
}

.editor-styles-wrapper
	.tassel-stats.is-preview-mobile
	.tassel-stat-card__content {
	height: auto !important;
}

.editor-styles-wrapper
	.tassel-stats.is-preview-mobile
	.tassel-stat-card__description {
	min-height: 0;
}

.editor-styles-wrapper
	.tassel-stats.is-preview-mobile
	.tassel-stat-card__icon {
	font-size: var(
		--tassel-stat-icon-size-mobile,
		var( --tassel-stat-icon-size-tablet )
	);
	height: var(
		--tassel-stat-icon-size-mobile,
		var( --tassel-stat-icon-size-tablet )
	);
	width: var(
		--tassel-stat-icon-size-mobile,
		var( --tassel-stat-icon-size-tablet )
	);
}

.editor-styles-wrapper
	.tassel-stats.is-preview-mobile
	.tassel-stat-card__number {
	font-size: var(
		--tassel-stat-font-size-mobile,
		var( --tassel-stat-font-size-tablet )
	);
}

.editor-styles-wrapper
	.tassel-stats.is-preview-mobile
	.tassel-stat-card__description,
.editor-styles-wrapper
	.tassel-stats.is-preview-mobile
	.tassel-stat-card__supporting-text {
	font-size: var(
		--tassel-description-font-size-mobile,
		var( --tassel-description-font-size-tablet )
	);
}

@media ( prefers-reduced-motion: reduce ) {
	.tassel-stat-card__fill,
	.tassel-stat-card__divider,
	.tassel-stat-card__number {
		transition: none;
	}
}