/* inkPad / Slider */

.inkpad-scope .inkpad-slider,
.editor-styles-wrapper .inkpad-slider {
	--inkpad-slider-inner-pad-y: var(--inkpad-space-sm);
	--inkpad-slider-inner-pad-x: var(--inkpad-space-sm);
	--inkpad-slider-card-gap: var(--inkpad-space-md);
	--inkpad-slider-card-peek: clamp(2.5rem, 7vw, 5rem);
	--inkpad-slider-card-radius: calc(var(--inkpad-radius-panel, var(--inkpad-radius, 1.25rem)) * 1.05);
	--inkpad-slider-card-min-height: clamp(18rem, 46vw, 30rem);
	--inkpad-slider-content-size: var(--inkpad-font-md);
	--inkpad-slider-content-weight: var(--inkpad-weight-normal);
	--inkpad-slider-content-max-width: 34rem;
	--inkpad-slider-content-color: var(--inkpad-color-text, var(--inkpad-text, #111111));
	--inkpad-slider-card-bg: var(--inkpad-color-surface, var(--inkpad-surface, #ffffff));
	--inkpad-slider-card-border: 1px solid transparent;
	--inkpad-slider-card-shadow: var(--inkpad-shadow-md, none);
	--inkpad-slider-card-blur: 0px;
	--inkpad-slider-card-overlay: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--inkpad-color-text, var(--inkpad-text, #111111)) 24%, transparent) 100%);
	--inkpad-slider-text-align: left;
	--inkpad-slider-content-margin-inline-start: 0;
	--inkpad-slider-content-margin-inline-end: auto;
	position: relative;
	width: 100%;
	box-sizing: border-box;
}

.inkpad-scope .inkpad-slider .inkpad-inner,
.editor-styles-wrapper .inkpad-slider .inkpad-inner {
	padding: var(--inkpad-slider-inner-pad-y) var(--inkpad-slider-inner-pad-x);
	box-sizing: border-box;
}

.inkpad-scope .inkpad-slider--padding-none .inkpad-inner,
.editor-styles-wrapper .inkpad-slider--padding-none .inkpad-inner {
	padding: 0;
}

.inkpad-scope .inkpad-slider--padding-sm .inkpad-inner,
.editor-styles-wrapper .inkpad-slider--padding-sm .inkpad-inner {
	--inkpad-slider-inner-pad-y: var(--inkpad-space-xs);
	--inkpad-slider-inner-pad-x: var(--inkpad-space-xs);
}

.inkpad-scope .inkpad-slider--padding-lg .inkpad-inner,
.editor-styles-wrapper .inkpad-slider--padding-lg .inkpad-inner {
	--inkpad-slider-inner-pad-y: var(--inkpad-space-md);
	--inkpad-slider-inner-pad-x: var(--inkpad-space-md);
}

.inkpad-scope .inkpad-slider--size-sm,
.editor-styles-wrapper .inkpad-slider--size-sm {
	--inkpad-slider-card-min-height: clamp(15rem, 38vw, 22rem);
	--inkpad-slider-card-gap: var(--inkpad-space-sm);
	--inkpad-slider-content-size: var(--inkpad-font-sm);
	--inkpad-slider-content-max-width: 28rem;
}

.inkpad-scope .inkpad-slider--size-lg,
.editor-styles-wrapper .inkpad-slider--size-lg {
	--inkpad-slider-card-min-height: clamp(21rem, 54vw, 34rem);
	--inkpad-slider-card-gap: var(--inkpad-space-lg);
	--inkpad-slider-content-size: var(--inkpad-font-lg);
	--inkpad-slider-content-max-width: 38rem;
}

.inkpad-scope .inkpad-slider--weight-normal,
.editor-styles-wrapper .inkpad-slider--weight-normal {
	--inkpad-slider-content-weight: var(--inkpad-weight-normal);
}

.inkpad-scope .inkpad-slider--weight-medium,
.editor-styles-wrapper .inkpad-slider--weight-medium {
	--inkpad-slider-content-weight: var(--inkpad-weight-medium);
}

.inkpad-scope .inkpad-slider--weight-bold,
.editor-styles-wrapper .inkpad-slider--weight-bold {
	--inkpad-slider-content-weight: var(--inkpad-weight-bold);
}

.inkpad-scope .inkpad-slider--align-left,
.editor-styles-wrapper .inkpad-slider--align-left {
	--inkpad-slider-text-align: left;
	--inkpad-slider-content-margin-inline-start: 0;
	--inkpad-slider-content-margin-inline-end: auto;
}

.inkpad-scope .inkpad-slider--align-center,
.editor-styles-wrapper .inkpad-slider--align-center {
	--inkpad-slider-text-align: center;
	--inkpad-slider-content-margin-inline-start: auto;
	--inkpad-slider-content-margin-inline-end: auto;
}

.inkpad-scope .inkpad-slider--align-right,
.editor-styles-wrapper .inkpad-slider--align-right {
	--inkpad-slider-text-align: right;
	--inkpad-slider-content-margin-inline-start: auto;
	--inkpad-slider-content-margin-inline-end: 0;
}

.inkpad-scope .inkpad-slider-shell,
.editor-styles-wrapper .inkpad-slider-shell {
	display: flex;
	flex-direction: column;
	gap: var(--inkpad-space-md);
}

.inkpad-scope .inkpad-slider-viewport,
.editor-styles-wrapper .inkpad-slider-viewport {
	position: relative;
	overflow: hidden;
	width: 100%;
	border-radius: calc(var(--inkpad-slider-card-radius) + var(--inkpad-space-xs));
	touch-action: pan-y pinch-zoom;
	-webkit-user-select: none;
	user-select: none;
}

.inkpad-scope .inkpad-slider-track,
.editor-styles-wrapper .inkpad-slider-track {
	display: flex;
	align-items: stretch;
	gap: var(--inkpad-slider-card-gap);
	/* Percentage slide widths resolve against the viewport, not intrinsic track content. */
	width: 100%;
	box-sizing: border-box;
	padding-right: var(--inkpad-slider-card-peek);
	will-change: transform;
	transform: translate3d(0, 0, 0);
	transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.inkpad-scope .inkpad-slider.is-dragging .inkpad-slider-track,
.editor-styles-wrapper .inkpad-slider.is-dragging .inkpad-slider-track {
	transition: none;
}

.inkpad-scope .inkpad-slider.is-dragging .inkpad-slider-viewport,
.editor-styles-wrapper .inkpad-slider.is-dragging .inkpad-slider-viewport {
	cursor: grabbing;
}

.inkpad-scope .inkpad-slider .inkpad-slide,
.editor-styles-wrapper .inkpad-slider .inkpad-slide {
	flex: 0 0 calc(100% - var(--inkpad-slider-card-peek));
	width: calc(100% - var(--inkpad-slider-card-peek));
	min-height: var(--inkpad-slider-card-min-height);
	position: relative;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	box-sizing: border-box;
	border-radius: var(--inkpad-slider-card-radius);
	border: var(--inkpad-slider-card-border);
	background-color: var(--inkpad-slider-card-bg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	box-shadow: var(--inkpad-slider-card-shadow);
	-webkit-backdrop-filter: blur(var(--inkpad-slider-card-blur));
	backdrop-filter: blur(var(--inkpad-slider-card-blur));
	opacity: 0.56;
	transform: scale(0.94) translateZ(0);
	transition:
		transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
		opacity var(--inkpad-transition-medium),
		box-shadow var(--inkpad-transition-medium);
}

.inkpad-scope .inkpad-slider--single,
.editor-styles-wrapper .inkpad-slider--single {
	--inkpad-slider-card-peek: 0rem;
}

.inkpad-scope .inkpad-slider[data-slider-ready="true"] .inkpad-slide[data-state="active"],
.editor-styles-wrapper .inkpad-slider .inkpad-slide[data-state="active"] {
	opacity: 1;
	transform: scale(1) translateZ(0);
}

.inkpad-scope .inkpad-slider[data-slider-ready="true"] .inkpad-slide[data-state="previous"],
.inkpad-scope .inkpad-slider[data-slider-ready="true"] .inkpad-slide[data-state="next"] {
	opacity: 0.82;
	transform: scale(0.97) translateZ(0);
}

.inkpad-scope .inkpad-slider[data-slider-ready="true"] .inkpad-slide[data-state="before"],
.inkpad-scope .inkpad-slider[data-slider-ready="true"] .inkpad-slide[data-state="after"] {
	opacity: 0.48;
	transform: scale(0.92) translateZ(0);
}

.inkpad-scope .inkpad-slide-overlay,
.editor-styles-wrapper .inkpad-slide-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: var(--inkpad-slider-card-overlay);
}

.inkpad-scope .inkpad-slide-content,
.editor-styles-wrapper .inkpad-slide-content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: min(100%, var(--inkpad-slider-content-max-width));
	min-height: 100%;
	margin-inline-start: var(--inkpad-slider-content-margin-inline-start);
	margin-inline-end: var(--inkpad-slider-content-margin-inline-end);
	padding: clamp(var(--inkpad-space-md), 4vw, var(--inkpad-space-xl));
	box-sizing: border-box;
	font-size: var(--inkpad-slider-content-size);
	font-weight: var(--inkpad-slider-content-weight);
	line-height: var(--inkpad-line-height);
	text-align: var(--inkpad-slider-text-align);
	color: var(--inkpad-slider-content-color);
	background: none;
	border: 0;
	box-shadow: none;
}

.inkpad-scope .inkpad-slide-content > :first-child,
.editor-styles-wrapper .inkpad-slide-content > :first-child {
	margin-top: 0;
}

.inkpad-scope .inkpad-slide-content > :last-child,
.editor-styles-wrapper .inkpad-slide-content > :last-child {
	margin-bottom: 0;
}

.inkpad-scope .inkpad-slider-controls,
.editor-styles-wrapper .inkpad-slider-controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--inkpad-space-sm);
}

.inkpad-scope .inkpad-slider-controls-spacer,
.editor-styles-wrapper .inkpad-slider-controls-spacer {
	flex: 1 1 auto;
}

.inkpad-scope .inkpad-slider-arrows,
.editor-styles-wrapper .inkpad-slider-arrows {
	display: flex;
	flex: 0 0 auto;
	gap: var(--inkpad-space-xs);
}

.inkpad-scope .inkpad-slider-prev.inkpad-button,
.inkpad-scope .inkpad-slider-next.inkpad-button,
.editor-styles-wrapper .inkpad-slider-prev.inkpad-button,
.editor-styles-wrapper .inkpad-slider-next.inkpad-button {
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: var(--inkpad-space-xs) var(--inkpad-space-sm);
	line-height: 1;
}

.inkpad-scope .inkpad-slider-dots,
.editor-styles-wrapper .inkpad-slider-dots {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--inkpad-space-xs);
}

.inkpad-scope .inkpad-slider-dot,
.editor-styles-wrapper .inkpad-slider-dot {
	width: 0.75rem;
	height: 0.75rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: color-mix(in srgb, var(--inkpad-color-text, var(--inkpad-text, #111111)) 24%, transparent);
	box-shadow: var(--inkpad-shadow-ambient);
	cursor: pointer;
	transition:
		width var(--inkpad-transition-fast),
		transform var(--inkpad-transition-fast),
		background-color var(--inkpad-transition-fast),
		opacity var(--inkpad-transition-fast);
}

.inkpad-scope .inkpad-slider-dot[data-active="true"],
.editor-styles-wrapper .inkpad-slider-dot[data-active="true"] {
	width: 2.4rem;
	background: var(--inkpad-color-accent, var(--inkpad-accent, currentcolor));
	transform: translateZ(0);
}

.editor-styles-wrapper .inkpad-slider-editor {
	display: flex;
	flex-direction: column;
	gap: var(--inkpad-space-sm);
}

.editor-styles-wrapper .inkpad-slider-editor__label,
.editor-styles-wrapper .inkpad-slider-editor__meta {
	margin: 0;
	color: var(--inkpad-color-text-muted, var(--inkpad-text-muted, #6b7280));
}

.editor-styles-wrapper .inkpad-slider-viewport--editor {
	border: 1px dashed color-mix(in srgb, var(--inkpad-color-text, var(--inkpad-text, #111111)) 18%, transparent);
}

.editor-styles-wrapper .inkpad-slider-viewport--editor .inkpad-slider-track {
	width: 100%;
	padding-right: 0;
	gap: 0;
}

.editor-styles-wrapper .inkpad-slider-viewport--editor .inkpad-slide {
	flex-basis: 100%;
	width: 100%;
	opacity: 1;
	transform: none;
}

.editor-styles-wrapper .inkpad-slider-slide-wrap {
	position: relative;
	display: flex;
	align-items: stretch;
	width: 100%;
	min-height: inherit;
}

.editor-styles-wrapper .inkpad-slider-editor__color-input {
	width: 3rem;
	height: 2.5rem;
	padding: 0;
	border: 1px solid color-mix(in srgb, var(--inkpad-color-text, var(--inkpad-text, #111111)) 16%, transparent);
	border-radius: var(--inkpad-radius-control, 0.5rem);
	background: color-mix(in srgb, var(--inkpad-color-surface, var(--inkpad-surface, #ffffff)) 88%, transparent);
}

.editor-styles-wrapper .inkpad-slider-editor-reorder-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--inkpad-space-xs);
}

.editor-styles-wrapper .inkpad-slider-editor-reorder-row + .inkpad-slider-editor-reorder-row {
	margin-top: var(--inkpad-space-xs);
}

@media (max-width: 782px) {
	.inkpad-scope .inkpad-slider,
	.editor-styles-wrapper .inkpad-slider {
		--inkpad-slider-card-peek: 0rem;
		--inkpad-slider-card-gap: var(--inkpad-space-sm);
	}

	.inkpad-scope .inkpad-slider-controls,
	.editor-styles-wrapper .inkpad-slider-controls {
		flex-direction: column;
		align-items: stretch;
	}

	.inkpad-scope .inkpad-slider-dots,
	.editor-styles-wrapper .inkpad-slider-dots {
		order: 2;
	}

	.inkpad-scope .inkpad-slider-arrows,
	.editor-styles-wrapper .inkpad-slider-arrows {
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.inkpad-scope .inkpad-slider-track,
	.inkpad-scope .inkpad-slider .inkpad-slide,
	.inkpad-scope .inkpad-slider-dot,
	.editor-styles-wrapper .inkpad-slider-track,
	.editor-styles-wrapper .inkpad-slider .inkpad-slide,
	.editor-styles-wrapper .inkpad-slider-dot {
		transition: none;
	}
}