/**
 * Insertion sort animator — key panel, shift, and insert steps.
 *
 * @package incs
 */

.incs-algo-animator__key-panel {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.85rem;
	border-radius: 4px;
	background: var(--incs-royal-pale);
	border: 1px solid color-mix(in srgb, var(--incs-royal-bright) 25%, transparent);
}

.incs-algo-animator__key-label {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--incs-royal);
}

.incs-algo-animator__key-value {
	font-family: var(--incs-font-sans);
	font-size: 15px;
	font-weight: 600;
	color: var(--incs-royal-bright);
	line-height: 1.2;
	min-width: 1.25rem;
}

.incs-algo-animator__bar--shift {
	outline: 3px solid #3b82f6;
	outline-offset: 2px;
}

.incs-algo-animator__bar--insert {
	outline: 3px solid #10b981;
	outline-offset: 2px;
}

.incs-algo-animator__leg-box--key {
	border: 2.5px solid var(--incs-royal-bright);
	background: var(--incs-royal-pale);
}

.incs-algo-animator__leg-box--shift {
	border: 2.5px solid #3b82f6;
}

.incs-algo-animator__leg-box--insert {
	border: 2.5px solid #10b981;
	background: color-mix(in srgb, #10b981 20%, transparent);
}

.incs-algo-animator[data-algorithm="insertion-sort"] .incs-algo-animator__key-panel.is-idle .incs-algo-animator__key-value {
	color: var(--incs-muted);
	font-weight: 400;
}