/* =========================================
   inkPad / inkFrame Footer
   Premium frame-surface footer
========================================= */

.inkpad-scope .inkpad-footer,
.editor-styles-wrapper .inkpad-footer {
	--inkpad-footer-bg: color-mix(
		in srgb,
		var(--inkpad-color-surface, var(--inkpad-surface, #ffffff)) 92%,
		var(--inkpad-color-accent, var(--inkpad-accent, currentColor)) 8%
	);
	--inkpad-footer-border: color-mix(
		in srgb,
		var(--inkpad-color-text, var(--inkpad-text, currentColor)) 10%,
		transparent
	);
	--inkpad-footer-shadow: var(--inkpad-shadow-ambient, none);
	--inkpad-footer-backdrop: blur(0px);
	width: min(calc(100% - (var(--inkpad-space-md) * 2)), var(--inkpad-container-width, 72rem));
	margin: clamp(var(--inkpad-space-lg), 6vw, calc(var(--inkpad-space-xl) * 1.15)) auto;
	padding: clamp(var(--inkpad-space-md), 3vw, var(--inkpad-space-xl));
	font-size: var(--inkpad-font-md);
	font-weight: var(--inkpad-weight-normal);
	text-align: center;
	color: var(--inkpad-text);
	background: var(--inkpad-footer-bg);
	border: 1px solid var(--inkpad-footer-border);
	border-radius: calc(var(--inkpad-radius) * 1.35);
	box-shadow: var(--inkpad-footer-shadow);
	backdrop-filter: var(--inkpad-footer-backdrop);
	-webkit-backdrop-filter: var(--inkpad-footer-backdrop);
	transition:
		background-color var(--inkpad-transition-medium),
		box-shadow var(--inkpad-transition-medium),
		border-color var(--inkpad-transition-medium),
		transform var(--inkpad-transition-medium);
	box-sizing: border-box;
}

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

.inkpad-scope .inkpad-footer .inkpad-footer-content,
.editor-styles-wrapper .inkpad-footer .inkpad-footer-content {
	margin: 0;
}

.editor-styles-wrapper .inkpad-footer .inkpad-footer__inner-blocks {
	min-height: 2.75rem;
}

.editor-styles-wrapper .inkpad-footer .inkpad-footer-content--legacy {
	opacity: 0.72;
}

/* ---------- Align ---------- */
.inkpad-scope .inkpad-footer.inkpad-footer--align-left,
.editor-styles-wrapper .inkpad-footer.inkpad-footer--align-left { text-align: left; }

.inkpad-scope .inkpad-footer.inkpad-footer--align-center,
.editor-styles-wrapper .inkpad-footer.inkpad-footer--align-center { text-align: center; }

.inkpad-scope .inkpad-footer.inkpad-footer--align-right,
.editor-styles-wrapper .inkpad-footer.inkpad-footer--align-right { text-align: right; }

/* ---------- Size ---------- */
.inkpad-scope .inkpad-footer.inkpad-footer--size-sm,
.editor-styles-wrapper .inkpad-footer.inkpad-footer--size-sm { font-size: var(--inkpad-font-sm); }

.inkpad-scope .inkpad-footer.inkpad-footer--size-md,
.editor-styles-wrapper .inkpad-footer.inkpad-footer--size-md { font-size: var(--inkpad-font-md); }

.inkpad-scope .inkpad-footer.inkpad-footer--size-lg,
.editor-styles-wrapper .inkpad-footer.inkpad-footer--size-lg { font-size: var(--inkpad-font-lg); }

/* ---------- Weight ---------- */
.inkpad-scope .inkpad-footer.inkpad-footer--weight-normal,
.editor-styles-wrapper .inkpad-footer.inkpad-footer--weight-normal { font-weight: var(--inkpad-weight-normal); }

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

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

/* ---------- Variant ---------- */
.inkpad-scope .inkpad-footer.inkpad-footer--variant-primary,
.editor-styles-wrapper .inkpad-footer.inkpad-footer--variant-primary {
	--inkpad-footer-bg: color-mix(
		in srgb,
		var(--inkpad-color-surface, var(--inkpad-surface, #ffffff)) 86%,
		var(--inkpad-color-accent, var(--inkpad-accent, currentColor)) 14%
	);
	--inkpad-footer-border: color-mix(
		in srgb,
		var(--inkpad-color-accent, var(--inkpad-accent, currentColor)) 24%,
		var(--inkpad-color-text, var(--inkpad-text, currentColor)) 6%
	);
	--inkpad-footer-shadow: var(--inkpad-shadow-elevation, var(--inkpad-shadow, none));
}

.inkpad-scope .inkpad-footer.inkpad-footer--variant-outlined,
.editor-styles-wrapper .inkpad-footer.inkpad-footer--variant-outlined {
	--inkpad-footer-bg: color-mix(
		in srgb,
		var(--inkpad-color-surface, var(--inkpad-surface, #ffffff)) 94%,
		transparent
	);
	--inkpad-footer-border: color-mix(
		in srgb,
		var(--inkpad-color-text, var(--inkpad-text, currentColor)) 16%,
		transparent
	);
	--inkpad-footer-shadow: none;
}

.inkpad-scope .inkpad-footer.inkpad-footer--variant-glass,
.editor-styles-wrapper .inkpad-footer.inkpad-footer--variant-glass {
	--inkpad-footer-bg: color-mix(
		in srgb,
		var(--inkpad-color-surface, var(--inkpad-surface, #ffffff)) 62%,
		transparent
	);
	--inkpad-footer-border: color-mix(
		in srgb,
		var(--inkpad-color-text, var(--inkpad-text, currentColor)) 10%,
		transparent
	);
	--inkpad-footer-shadow: 0 22px 48px color-mix(in srgb, var(--inkpad-color-text, #000) 10%, transparent);
	--inkpad-footer-backdrop: blur(18px);
}

.inkpad-scope .inkpad-footer.inkpad-footer--variant-clay,
.editor-styles-wrapper .inkpad-footer.inkpad-footer--variant-clay {
	--inkpad-footer-bg: color-mix(
		in srgb,
		var(--inkpad-color-surface-alt, var(--inkpad-color-surface, #ffffff)) 88%,
		var(--inkpad-color-accent, var(--inkpad-accent, currentColor)) 12%
	);
	--inkpad-footer-border: color-mix(
		in srgb,
		var(--inkpad-color-text, var(--inkpad-text, currentColor)) 6%,
		transparent
	);
	--inkpad-footer-shadow:
		0 20px 40px color-mix(in srgb, var(--inkpad-color-text, #000) 12%, transparent),
		inset 0 1px 0 color-mix(in srgb, var(--inkpad-color-on-accent, #ffffff) 35%, transparent);
}