.tassel-distinctive {
	align-self: center;
	border-radius: var( --wp--custom--border-radius--default, 12px );
	box-sizing: border-box;
	flex: 0 0 var( --tassel-distinctive-closed-width, 136px );
	height: var(
		--tassel-distinctive-current-closed-height,
		var( --tassel-distinctive-closed-height, 550px )
	);
	isolation: isolate;
	margin: 0;
	overflow: hidden;
	position: relative;
	scroll-snap-align: center;
	transition:
		flex-basis 0.45s ease,
		height 0.45s ease;
	width: var( --tassel-distinctive-closed-width, 136px );
}

.tassel-distinctive.is-active {
	flex-basis: var(
		--tassel-distinctive-current-open-width,
		var( --tassel-distinctive-open-width, 850px )
	);
	height: var(
		--tassel-distinctive-current-height,
		var( --tassel-distinctive-height, 700px )
	);
	width: var(
		--tassel-distinctive-current-open-width,
		var( --tassel-distinctive-open-width, 850px )
	);
}

.tassel-distinctive__media,
.tassel-distinctive__media-placeholder,
.tassel-distinctive__gradient,
.tassel-distinctive__overlay {
	inset: 0;
	position: absolute;
}

.tassel-distinctive__media,
.tassel-distinctive__media-placeholder {
	height: 100%;
	object-fit: cover;
	width: 100%;
	z-index: -4;
}

.tassel-distinctive__media {
	transition:
		opacity 0.3s ease,
		visibility 0.3s ease;
}

.tassel-distinctive__media--expanded {
	opacity: 0;
	visibility: hidden;
}

.tassel-distinctive.is-active:has(
		> .tassel-distinctive__media--expanded
	)
	> .tassel-distinctive__media:not(
		.tassel-distinctive__media--expanded
	) {
	opacity: 0;
}

.tassel-distinctive.is-active
	> .tassel-distinctive__media--expanded {
	opacity: 1;
	visibility: visible;
}

.tassel-distinctive__media-placeholder {
	align-items: center;
	background:
		linear-gradient(
			135deg,
			var( --wp--preset--color--primary-dark, #0f3571 ),
			var( --wp--preset--color--primary, #19468d )
		);
	display: flex;
	justify-content: center;
}

.tassel-distinctive__media-placeholder i {
	color: var( --wp--preset--color--base, #fff );
	font-size: 44px;
	height: 44px;
	opacity: 0.55;
	width: 44px;
}

.tassel-distinctive__gradient {
	background: linear-gradient(
		to bottom,
		rgb( 0 0 0 / 80% ) 10%,
		rgb( 0 0 0 / 0% ) 80%
	);
	z-index: -3;
}

.tassel-distinctive.is-active .tassel-distinctive__gradient {
	background: linear-gradient(
		to bottom,
		rgb( 0 0 0 / 48% ) 0%,
		rgb( 0 0 0 / 8% ) 42%,
		rgb( 0 0 0 / 72% ) 100%
	);
}

.tassel-distinctive__overlay {
	background: var(
		--tassel-distinctive-hover-overlay,
		rgb( 25 70 141 / 65% )
	);
	transform: scaleX( 0 );
	transform-origin: left center;
	transition: transform 0.3s ease;
	z-index: -2;
}

.tassel-distinctive:not(.is-active):hover .tassel-distinctive__overlay,
.tassel-distinctive:not(.is-active):focus-within
	.tassel-distinctive__overlay {
	transform: scaleX( 1 );
}

.tassel-distinctive.is-active .tassel-distinctive__overlay {
	background: var( --tassel-distinctive-overlay, rgb( 0 0 0 / 28% ) );
	transform: scaleX( 1 );
}

.tassel-distinctive__tab {
	align-items: center;
	background: transparent;
	border: 0;
	box-sizing: border-box;
	color: var(
		--tassel-distinctive-label-color,
		var( --wp--preset--color--base, #fff )
	);
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 18px;
	height: 100%;
	justify-content: flex-start;
	padding: 18px 43px;
	position: relative;
	width: 100%;
	z-index: 2;
}

.tassel-distinctive__tab:focus-visible {
	outline: 3px solid var( --wp--preset--color--base, #fff );
	outline-offset: -5px;
}

.tassel-distinctive__icon {
	align-items: center;
	background: var( --wp--preset--color--base, #fff );
	border-radius: 999px;
	color: var( --wp--preset--color--primary, #19468d );
	display: inline-flex;
	flex: 0 0 50px;
	height: 50px;
	justify-content: center;
	overflow: hidden;
	width: 50px;
}

.tassel-distinctive__icon i {
	font-size: 22px;
}

.tassel-distinctive__icon img {
	height: 30px;
	object-fit: contain;
	width: 30px;
}

.tassel-distinctive__label {
	font-family: var(
		--tassel-distinctive-label-font-family,
		var( --wp--preset--font-family--body )
	);
	font-size: var(
		--tassel-distinctive-label-font-size,
		var( --wp--preset--font-size--h-6, 18.5px )
	);
	font-weight: var( --tassel-distinctive-label-font-weight, 800 );
	letter-spacing: 2px;
	line-height: var( --wp--custom--typography--line-height--h-6, 1.15 );
	margin: 0;
	text-transform: uppercase;
	white-space: nowrap;
	writing-mode: vertical-rl;
}

.tassel-distinctive.is-active .tassel-distinctive__tab {
	flex-direction: row;
	height: auto;
	padding: 18px 30px;
}

.tassel-distinctive.is-active .tassel-distinctive__label {
	flex: 1 1 auto;
	text-align: left;
	white-space: normal;
	writing-mode: horizontal-tb;
}

.tassel-distinctive__panel {
	bottom: 0;
	box-sizing: border-box;
	display: none;
	flex-direction: column;
	inset-inline: 0;
	justify-content: flex-end;
	padding: 30px;
	position: absolute;
	top: 0;
	z-index: 1;
}

.tassel-distinctive.is-active .tassel-distinctive__panel {
	display: flex;
}

.tassel-distinctive__body {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 15px;
	max-width: 100%;
	opacity: 0;
	padding-right: 20px;
	visibility: hidden;
}

.tassel-distinctive.is-active .tassel-distinctive__body {
	animation: tassel-distinctive-content-in 0.18s ease 0.45s both;
}

.tassel-distinctive .tassel-distinctive__heading {
	color: var(
		--tassel-distinctive-heading-color,
		var( --wp--preset--color--base, #fff )
	);
	font-family: var(
		--tassel-distinctive-heading-font-family,
		var( --wp--preset--font-family--body )
	);
	font-size: var(
		--tassel-distinctive-heading-font-size,
		var( --wp--preset--font-size--h-3, 39.299px )
	);
	font-weight: var( --tassel-distinctive-heading-font-weight, 700 );
	letter-spacing: 0;
	line-height: var( --wp--custom--typography--line-height--h-3, 1.15 );
	margin: 0;
	margin-block: 0;
	word-break: break-word;
}

.tassel-distinctive .tassel-distinctive__description {
	color: var(
		--tassel-distinctive-body-color,
		var( --wp--preset--color--base, #fff )
	);
	font-family: var(
		--tassel-distinctive-body-font-family,
		var( --wp--preset--font-family--body )
	);
	font-size: var(
		--tassel-distinctive-body-font-size,
		var( --wp--preset--font-size--body, 17px )
	);
	font-weight: var( --tassel-distinctive-body-font-weight, 400 );
	letter-spacing: 0;
	line-height: var( --wp--custom--typography--line-height--body, 1.5 );
	margin: 0;
	margin-block: 0;
	word-break: break-word;
}

.tassel-distinctive__playback {
	align-items: center;
	background: rgb( 0 0 0 / 60% );
	border: 1px solid rgb( 255 255 255 / 40% );
	border-radius: 999px;
	color: var( --wp--preset--color--base, #fff );
	cursor: pointer;
	display: inline-flex;
	height: 50px;
	justify-content: center;
	padding: 0;
	position: absolute;
	right: 30px;
	top: 18px;
	width: 50px;
	z-index: 3;
}

.tassel-distinctive__playback i {
	font-size: 14px;
}

.tassel-distinctive__playback:focus-visible {
	outline: 3px solid var( --wp--preset--color--base, #fff );
	outline-offset: 3px;
}

@media ( max-width: 1024px ) {
	.tassel-distinctive {
		--tassel-distinctive-current-closed-height: var(
			--tassel-distinctive-closed-height-tablet,
			var( --tassel-distinctive-closed-height, 550px )
		);
	}

	.tassel-distinctive.is-active {
		height: var( --tassel-distinctive-current-height );
	}

	.tassel-distinctive__label {
		font-size: var(
			--tassel-distinctive-label-font-size-tablet,
			var( --tassel-distinctive-label-font-size )
		);
	}

	.tassel-distinctive .tassel-distinctive__heading {
		font-size: var(
			--tassel-distinctive-heading-font-size-tablet,
			var( --tassel-distinctive-heading-font-size )
		);
	}

	.tassel-distinctive .tassel-distinctive__description {
		font-size: var(
			--tassel-distinctive-body-font-size-tablet,
			var( --tassel-distinctive-body-font-size )
		);
	}

	.tassel-distinctive.is-active .tassel-distinctive__tab,
	.tassel-distinctive__panel {
		padding-inline: 22px;
	}

	.tassel-distinctive__playback {
		right: 22px;
	}
}

@media ( max-width: 781px ) {
	.tassel-distinctive {
		--tassel-distinctive-current-closed-height: var(
			--tassel-distinctive-closed-height-mobile,
			var( --tassel-distinctive-closed-height-tablet, 550px )
		);
	}

	.tassel-distinctive.is-active {
		height: var( --tassel-distinctive-current-height );
	}

	.tassel-distinctive__label {
		font-size: var(
			--tassel-distinctive-label-font-size-mobile,
			var( --tassel-distinctive-label-font-size-tablet )
		);
	}

	.tassel-distinctive .tassel-distinctive__heading {
		font-size: var(
			--tassel-distinctive-heading-font-size-mobile,
			var( --tassel-distinctive-heading-font-size-tablet )
		);
	}

	.tassel-distinctive .tassel-distinctive__description {
		font-size: var(
			--tassel-distinctive-body-font-size-mobile,
			var( --tassel-distinctive-body-font-size-tablet )
		);
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.tassel-distinctive,
	.tassel-distinctive__overlay {
		transition: none;
	}

	.tassel-distinctive.is-active .tassel-distinctive__body {
		animation: none;
		opacity: 1;
		visibility: visible;
	}
}

@keyframes tassel-distinctive-content-in {
	from {
		opacity: 0;
		visibility: hidden;
	}

	to {
		opacity: 1;
		visibility: visible;
	}
}