.tassel-distinctives {
	background: var(
		--tassel-distinctives-background,
		var( --wp--preset--color--base, #fff )
	);
	box-sizing: border-box;
	margin-inline: auto;
	max-width: var( --tassel-distinctives-width, 100vw );
	overflow: hidden;
	padding: 0;
	width: 100%;
}

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

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

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

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

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

.tassel-distinctives__viewport {
	box-sizing: border-box;
	margin-inline: auto;
	max-width: calc(
		var( --tassel-distinctive-open-width, 850px ) +
			var( --tassel-distinctives-collapsed-space, 604px )
	);
	overflow: hidden;
	padding-block: var( --wp--preset--spacing--inner, 22px );
	width: 100%;
}

.tassel-distinctives__track {
	align-items: center;
	display: flex;
	gap: var( --tassel-distinctives-gap, 15px );
	justify-content: center;
	margin: 0;
	min-height: var(
		--tassel-distinctive-current-height,
		var( --tassel-distinctive-height, 700px )
	);
	padding: 0;
	scroll-behavior: smooth;
	--tassel-distinctive-current-closed-height: var(
		--tassel-distinctive-closed-height,
		550px
	);
}

.tassel-distinctives__navigation {
	align-items: center;
	display: none;
	gap: 10px;
	justify-content: center;
	padding: var( --wp--preset--spacing--inner, 22px );
}

.editor-styles-wrapper
	.tassel-distinctives.is-preview-tablet
	.tassel-distinctives__navigation,
.editor-styles-wrapper
	.tassel-distinctives.is-preview-mobile
	.tassel-distinctives__navigation {
	display: flex;
}

.tassel-distinctives__navigation-button {
	align-items: center;
	background: transparent;
	border: 1px solid var( --wp--preset--color--primary, #19468d );
	border-radius: 999px;
	color: var( --wp--preset--color--primary, #19468d );
	cursor: pointer;
	display: inline-flex;
	height: 50px;
	justify-content: center;
	overflow: hidden;
	padding: 0;
	position: relative;
	width: 50px;
}

.tassel-distinctives__navigation-button:disabled {
	cursor: default;
	opacity: 0.4;
}

.tassel-distinctives__navigation-button-fill {
	background: var( --wp--preset--color--primary, #19468d );
	bottom: -3px;
	height: 1px;
	left: 50%;
	position: absolute;
	transform: translateX( -50% );
	transition: height 0.25s ease;
	width: 54px;
}

.tassel-distinctives__navigation-button i {
	font-size: 18px;
	position: relative;
	z-index: 1;
}

.tassel-distinctives__navigation-button:not(:disabled):hover,
.tassel-distinctives__navigation-button:not(:disabled):focus-visible {
	border-color: var( --wp--preset--color--base, #fff );
	color: var( --wp--preset--color--base, #fff );
}

.tassel-distinctives__navigation-button:not(:disabled):hover
	.tassel-distinctives__navigation-button-fill,
.tassel-distinctives__navigation-button:not(:disabled):focus-visible
	.tassel-distinctives__navigation-button-fill {
	height: 54px;
}

@media ( max-width: 1600px ) {
	.tassel-distinctives__viewport {
		max-width: calc(
			var(
					--tassel-distinctive-open-width-desktop,
					var( --tassel-distinctive-open-width, 750px )
				) +
				var( --tassel-distinctives-collapsed-space, 604px )
		);
	}

	.tassel-distinctives__track {
		--tassel-distinctive-current-height: var(
			--tassel-distinctive-height-desktop,
			var( --tassel-distinctive-height, 650px )
		);
		--tassel-distinctive-current-open-width: var(
			--tassel-distinctive-open-width-desktop,
			var( --tassel-distinctive-open-width, 750px )
		);
		--tassel-distinctive-current-closed-height: var(
			--tassel-distinctive-closed-height,
			550px
		);
	}
}

@media ( max-width: 1280px ) and ( min-width: 1025px ) {
	.tassel-distinctives__track {
		--tassel-distinctive-current-height: var(
			--tassel-distinctive-height-desktop-sm,
			650px
		);
		--tassel-distinctive-current-open-width: var(
			--tassel-distinctive-open-width-desktop-sm,
			600px
		);
	}
}

@media ( max-width: 1024px ) {
	.tassel-distinctives__navigation {
		display: flex;
	}

	.editor-styles-wrapper
		.tassel-distinctives.is-preview-desktop
		.tassel-distinctives__navigation {
		display: none;
	}

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

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

	.tassel-distinctives__viewport {
		max-width: none;
		overflow-x: auto;
		overscroll-behavior-inline: contain;
		scrollbar-width: none;
	}

	.tassel-distinctives__viewport::-webkit-scrollbar {
		display: none;
	}

	.tassel-distinctives__track {
		--tassel-distinctive-current-height: var(
			--tassel-distinctive-height-tablet,
			var( --tassel-distinctive-height, 650px )
		);
		--tassel-distinctive-current-open-width: min(
			var( --tassel-distinctive-open-width-tablet, 380px ),
			calc( 100vw - 80px )
		);
		--tassel-distinctive-current-closed-height: var(
			--tassel-distinctive-closed-height-tablet,
			var( --tassel-distinctive-closed-height, 550px )
		);
		justify-content: flex-start;
		min-height: var( --tassel-distinctive-current-height );
		padding-inline: max(
			20px,
			calc(
				(
						100vw -
							min(
								var(
									--tassel-distinctive-open-width-tablet,
									380px
								),
								calc( 100vw - 80px )
							)
					) /
					2
			)
		);
		width: max-content;
	}
}

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

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

	.tassel-distinctives__track {
		--tassel-distinctive-current-height: var(
			--tassel-distinctive-height-mobile,
			var( --tassel-distinctive-height-tablet, 650px )
		);
		--tassel-distinctive-current-open-width: min(
			var( --tassel-distinctive-open-width-mobile, 380px ),
			calc( 100vw - 80px )
		);
		--tassel-distinctive-current-closed-height: var(
			--tassel-distinctive-closed-height-mobile,
			var( --tassel-distinctive-closed-height-tablet, 550px )
		);
		min-height: var( --tassel-distinctive-current-height );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.tassel-distinctives__track {
		scroll-behavior: auto;
	}

	.tassel-distinctives__navigation-button-fill {
		transition: none;
	}
}