.spiga-block-sticky-accordion {
	--spiga-sticky-accordion-top: clamp(1.5rem, 5vh, 4rem);
	--spiga-sticky-accordion-line: color-mix(in oklch, var(--color-primary-950) 22%, transparent);
}

.spiga-block-sticky-accordion[data-theme="dark"] {
	--spiga-sticky-accordion-line: color-mix(in oklch, white 26%, transparent);
}

@media (min-width: 768px) {
	.spiga-sticky-accordion__layout {
		min-height: calc(var(--spiga-sticky-accordion-steps, 2) * 100vh);
	}

	.spiga-sticky-accordion__media,
	.spiga-sticky-accordion__content {
		position: sticky;
		top: var(--spiga-sticky-accordion-top);
		min-height: calc(100vh - (var(--spiga-sticky-accordion-top) * 2));
	}

	.spiga-sticky-accordion__image-stack {
		height: calc(100vh - (var(--spiga-sticky-accordion-top) * 2));
	}

	.spiga-sticky-accordion__panels {
		position: relative;
		min-height: clamp(22rem, 48vh, 34rem);
	}
}

.spiga-sticky-accordion__image.is-active {
	opacity: 1;
	transform: scale(1);
}

.spiga-sticky-accordion__panel {
	transform: none;
}

@media (min-width: 768px) {
	.spiga-sticky-accordion__panel {
		transform: translateY(1.5rem);
	}

	.spiga-sticky-accordion__panel.is-active {
		opacity: 1;
		transform: translateY(0);
	}
}

.spiga-sticky-accordion__progress {
	background: var(--spiga-sticky-accordion-line);
}

.spiga-sticky-accordion__trigger.is-complete .spiga-sticky-accordion__progress-bar,
.spiga-sticky-accordion__trigger.is-active .spiga-sticky-accordion__progress-bar {
	width: var(--spiga-sticky-progress, 0%);
}

.spiga-sticky-accordion__trigger.is-complete .spiga-sticky-accordion__progress-bar {
	width: 100%;
}

@media (max-width: 767px) {
	.spiga-sticky-accordion__layout {
		min-height: auto;
	}

	.spiga-sticky-accordion__panels {
		display: flex;
		flex-direction: column;
		gap: 4rem;
		min-height: auto;
	}
}