.nav-tabs {
	.nav-link {
		color: var(--tblr-primary);
		background-color: white;

		&.active {
			color: white;
			background-color: var(--tblr-primary);
		}
	}
}

.dz-progress {
	visibility: hidden !important;
}

.lqd-tabs-nav-toggle {
	justify-content: center;

	button {

		&:before {
			content: '';
			display: inline-block;
			width: 14px;
			height: 14px;
			position: absolute;
			top: calc(50% - 7px);
			inset-inline-start: calc(50% - 15px);
			border-radius: 10px;
			transform: scale(0.5);
			opacity: 0;
			transition: transform 0.65s cubic-bezier(0.23, 1, 0.320, 1), opacity 0.65s cubic-bezier(0.23, 1, 0.320, 1);
			@apply bg-gradient-to-r from-[--gradient-from] via-[--gradient-via] to-[--gradient-to];
		}

		&:after {
			content: '';
			display: inline-block;
			width: 100%;
			height: 30px;
			border: 1px solid hsl(var(--heading-foreground) / 10%);
		}

		&:first-child,
		&:last-child {
			&:after {
				width: 28px;
			}

			.lqd-tabs-nav-txt {
				margin-bottom: 0;
			}
		}

		&:first-child {
			flex-direction: row;

			&:before {
				inset-inline-start: auto;
				inset-inline-end: 7px;
			}

			&:after {
				border-radius: 50em 0 0 50em;
				border-inline-end: none;
			}

			.lqd-tabs-nav-txt {
				margin-inline-end: 1em;
			}
		}

		&:last-child {
			flex-direction: row-reverse;

			&:before {
				inset-inline-start: 7px;
			}

			&:after {
				border-radius: 0 50em 50em 0;
				border-inline-start: none;
			}

			.lqd-tabs-nav-txt {
				margin-inline-start: 1em;
			}
		}

		&.lqd-is-active {
			@apply text-heading-foreground;

			&:before {
				opacity: 1;
				transform: scale(1);
			}
		}
	}

	.lqd-tabs-nav-txt {
		margin: 0 0.5em 7px;
		margin-bottom: 7px;
	}
}

.theme-dark {

	.nav-tabs {

		.nav-link {
			color: var(--lqd-color-heading);
			background-color: rgb(255 255 255 / 5%);

			&.active {
				color: white;
				background-color: var(--tblr-primary);
			}
		}
	}
}

@keyframes lqd-tabs-content-slide-in {
	from {
		transform: translateY(30px);
		opacity: 0;
	}
}

@keyframes lqd-tabs-content-scale-down {
	to {
		transform: scale(0.985);
		opacity: 0;
	}
}

::view-transition-old(lqd-tabs-content) {
	animation: lqd-tabs-content-scale-down 0.3s cubic-bezier(0.23, 1, 0.320, 1) both;
}

::view-transition-new(lqd-tabs-content) {
	animation: lqd-tabs-content-slide-in 0.3s cubic-bezier(0.23, 1, 0.320, 1) both;
}

.lqd-tabs-nav {
	view-transition-name: lqd-tabs-nav;
}

.lqd-tabs-content {
	view-transition-name: lqd-tabs-content;
}

@media screen and (max-width: 479px) {

	.lqd-tabs-nav-toggle {

		button {
			width: 100%;
			flex-direction: row;

			&:before {
				width: 16px;
				height: 16px;
				inset-inline-start: 10px;
				bottom: 10px;
				inset-inline-end: auto;
			}

			&:after {
				width: 36px;
				order: -1;
				border-radius: 50%;
			}

			&:not(:last-child) {
				margin-bottom: 0.5em;
			}
		}

		.lqd-tabs-nav-txt {
			margin-inline-start: 1em;
			margin-inline-end: 0;
		}
	}
}