/* inkPad / Tabs - shared shell + button contract */

.inkpad-scope .inkpad-tabs,
.editor-styles-wrapper .inkpad-tabs {
	--inkpad-tabs-inner-pad-y: var(--inkpad-space-sm);
	--inkpad-tabs-inner-pad-x: var(--inkpad-space-sm);
	--inkpad-tabs-nav-gap: var(--inkpad-space-sm);
	--inkpad-tabs-nav-margin-bottom: var(--inkpad-space-md);
	--inkpad-tabs-panel-radius: var(--inkpad-radius-panel, var(--inkpad-radius));
	--inkpad-tabs-panel-pad: var(--inkpad-space-md);
	--inkpad-tabs-panel-min-height: 180px;
	--inkpad-tabs-panel-font-size: var(--inkpad-font-md);
	--inkpad-tabs-button-idle-opacity: 0.88;
	--inkpad-tabs-button-idle-scale: 0.985;
	--inkpad-tabs-panel-bg: color-mix(
		in srgb,
		var(--inkpad-color-surface, var(--inkpad-surface, #ffffff)) 92%,
		var(--inkpad-color-accent, var(--inkpad-accent, currentcolor)) 8%
	);
	--inkpad-tabs-panel-border: none;
	--inkpad-tabs-panel-shadow: var(--inkpad-shadow-sm, none);
	--inkpad-tabs-panel-blur: 0px;
	--inkpad-tabs-panel-custom-bg: var(--inkpad-tabs-panel-bg);
	--inkpad-tabs-panel-image: none;
	--inkpad-tabs-button-bg: color-mix(
		in srgb,
		var(--inkpad-color-surface, var(--inkpad-surface, #ffffff)) 92%,
		var(--inkpad-color-accent, var(--inkpad-accent, currentcolor)) 8%
	);
	--inkpad-tabs-button-border: transparent;
	--inkpad-tabs-button-text: var(--inkpad-color-text, var(--inkpad-text, #111111));
	--inkpad-tabs-button-shadow: var(--inkpad-shadow-ambient, none);
	--inkpad-tabs-button-active-bg: var(--inkpad-color-accent, var(--inkpad-accent, currentcolor));
	--inkpad-tabs-button-active-border: transparent;
	--inkpad-tabs-button-active-text: var(--inkpad-color-text, var(--inkpad-text, #111111));
	--inkpad-tabs-button-active-shadow: var(--inkpad-shadow-sm, none);
	width: 100%;
	box-sizing: border-box;
}

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

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

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

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

.inkpad-scope .inkpad-tabs--size-sm,
.editor-styles-wrapper .inkpad-tabs--size-sm {
	--inkpad-tabs-panel-font-size: var(--inkpad-font-sm);
	--inkpad-tabs-panel-pad: var(--inkpad-space-sm);
}

.inkpad-scope .inkpad-tabs--size-lg,
.editor-styles-wrapper .inkpad-tabs--size-lg {
	--inkpad-tabs-panel-font-size: var(--inkpad-font-lg);
	--inkpad-tabs-panel-pad: var(--inkpad-space-lg);
}

.inkpad-scope .inkpad-tabs-nav,
.editor-styles-wrapper .inkpad-tabs-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: var(--inkpad-align-flex, flex-start);
	gap: var(--inkpad-tabs-nav-gap);
	list-style: none;
	margin: 0 0 var(--inkpad-tabs-nav-margin-bottom);
	padding: 0;
}

.inkpad-scope .inkpad-tabs-nav-item,
.editor-styles-wrapper .inkpad-tabs-nav-item {
	margin: 0;
}

.inkpad-scope .inkpad-tabs-button,
.editor-styles-wrapper .inkpad-tabs-button {
	--inkpad-button-bg: var(--inkpad-tabs-button-bg);
	--inkpad-button-border: var(--inkpad-tabs-button-border);
	--inkpad-button-text: var(--inkpad-tabs-button-text);
	--inkpad-button-shadow-stack: var(--inkpad-tabs-button-shadow);
	position: relative;
	white-space: nowrap;
	opacity: var(--inkpad-tabs-button-idle-opacity);
	transform: translateY(0) scale(var(--inkpad-tabs-button-idle-scale));
	transform-origin: center center;
	transition:
		transform var(--inkpad-transition-fast),
		opacity var(--inkpad-transition-fast);
	will-change: transform, opacity;
}

.inkpad-scope .inkpad-tabs-nav-item[data-active="true"] .inkpad-tabs-button,
.editor-styles-wrapper .inkpad-tabs-nav-item[data-active="true"] .inkpad-tabs-button {
	--inkpad-button-bg: var(--inkpad-tabs-button-active-bg);
	--inkpad-button-border: var(--inkpad-tabs-button-active-border);
	--inkpad-button-text: var(--inkpad-tabs-button-active-text);
	--inkpad-button-shadow-stack: var(--inkpad-tabs-button-active-shadow);
	opacity: 1;
	transform: translateY(-2px) scale(1);
}

.inkpad-scope .inkpad-tabs-nav-item:not([data-active="true"]) .inkpad-tabs-button:hover,
.inkpad-scope .inkpad-tabs-nav-item:not([data-active="true"]) .inkpad-tabs-button:focus-visible,
.editor-styles-wrapper .inkpad-tabs-nav-item:not([data-active="true"]) .inkpad-tabs-button:hover,
.editor-styles-wrapper .inkpad-tabs-nav-item:not([data-active="true"]) .inkpad-tabs-button:focus-visible {
	opacity: 0.97;
	transform: translateY(-1px) scale(0.992);
}

.inkpad-scope .inkpad-tabs-label,
.editor-styles-wrapper .inkpad-tabs-label {
	display: inline-block;
}

.inkpad-scope .inkpad-tabs-panels,
.editor-styles-wrapper .inkpad-tabs-panels {
	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	position: relative;
}

.inkpad-scope .inkpad-tabs-panel,
.editor-styles-wrapper .inkpad-tabs-panel {
	display: none;
	opacity: 0;
	transform: translateY(12px) scale(0.985);
	transform-origin: top center;
	transition:
		opacity var(--inkpad-transition-fast),
		transform var(--inkpad-transition-fast);
}

.inkpad-scope .inkpad-tabs-panel[data-active="true"],
.editor-styles-wrapper .inkpad-tabs-panel[data-active="true"] {
	display: block;
	opacity: 1;
	transform: translateY(0) scale(1);
	animation: inkpad-tabs-panel-in var(--inkpad-transition-medium) cubic-bezier(0.22, 1, 0.36, 1) both;
}

.inkpad-scope .inkpad-tabs-panel-inner,
.editor-styles-wrapper .inkpad-tabs-panel-inner {
	width: 100%;
	min-height: var(--inkpad-tabs-panel-min-height);
	box-sizing: border-box;
	padding: var(--inkpad-tabs-panel-pad);
	border-radius: var(--inkpad-tabs-panel-radius);
	border: var(--inkpad-tabs-panel-border);
	background-color: var(--inkpad-tabs-panel-custom-bg, var(--inkpad-tabs-panel-bg));
	background-image: var(--inkpad-tabs-panel-image);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	box-shadow: var(--inkpad-tabs-panel-shadow);
	backdrop-filter: blur(var(--inkpad-tabs-panel-blur));
	-webkit-backdrop-filter: blur(var(--inkpad-tabs-panel-blur));
	overflow: hidden;
	position: relative;
	isolation: isolate;
	font-size: var(--inkpad-tabs-panel-font-size);
	line-height: var(--inkpad-line-height);
	color: var(--inkpad-color-text, var(--inkpad-text));
}

.inkpad-scope .inkpad-tabs--align-left .inkpad-tabs-panel-inner,
.editor-styles-wrapper .inkpad-tabs--align-left .inkpad-tabs-panel-inner {
	text-align: left;
}

.inkpad-scope .inkpad-tabs--align-center .inkpad-tabs-panel-inner,
.editor-styles-wrapper .inkpad-tabs--align-center .inkpad-tabs-panel-inner {
	text-align: center;
}

.inkpad-scope .inkpad-tabs--align-right .inkpad-tabs-panel-inner,
.editor-styles-wrapper .inkpad-tabs--align-right .inkpad-tabs-panel-inner {
	text-align: right;
}

.inkpad-scope .inkpad-tabs--orientation-vertical .inkpad-inner,
.editor-styles-wrapper .inkpad-tabs--orientation-vertical .inkpad-inner {
	display: flex;
	align-items: flex-start;
	gap: var(--inkpad-tabs-nav-gap);
}

.inkpad-scope .inkpad-tabs--orientation-vertical .inkpad-tabs-nav,
.editor-styles-wrapper .inkpad-tabs--orientation-vertical .inkpad-tabs-nav {
	flex-direction: column;
	flex: 0 0 auto;
	min-width: 180px;
	margin-bottom: 0;
}

.inkpad-scope .inkpad-tabs--orientation-vertical .inkpad-tabs-panels,
.editor-styles-wrapper .inkpad-tabs--orientation-vertical .inkpad-tabs-panels {
	flex: 1 1 auto;
	min-width: 0;
}

.inkpad-scope .inkpad-tabs--orientation-vertical .inkpad-tabs-button,
.editor-styles-wrapper .inkpad-tabs--orientation-vertical .inkpad-tabs-button {
	width: 100%;
	justify-content: flex-start;
}

.inkpad-tabs-editor-remove-row + .inkpad-tabs-editor-remove-row {
	margin-top: var(--inkpad-space-xs);
}

@keyframes inkpad-tabs-panel-in {
	from {
		opacity: 0;
		transform: translateY(16px) scale(0.98);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.inkpad-scope .inkpad-tabs-button,
	.editor-styles-wrapper .inkpad-tabs-button,
	.inkpad-scope .inkpad-tabs-panel,
	.editor-styles-wrapper .inkpad-tabs-panel {
		transition: none;
	}

	.inkpad-scope .inkpad-tabs-panel[data-active="true"],
	.editor-styles-wrapper .inkpad-tabs-panel[data-active="true"] {
		animation: none;
	}
}