/* Canvas - Atlas preview styling */

.canvas-container {
	background-color: var(--color-bg-primary);
	background-image:
		linear-gradient(45deg, var(--color-bg-secondary) 25%, transparent 25%),
		linear-gradient(-45deg, var(--color-bg-secondary) 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, var(--color-bg-secondary) 75%),
		linear-gradient(-45deg, transparent 75%, var(--color-bg-secondary) 75%);
	background-size: 20px 20px;
	background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}

/* Canvas overlay controls */
.canvas-controls {
	position: absolute;
	bottom: var(--spacing-md);
	right: var(--spacing-md);
	display: flex;
	gap: var(--spacing-xs);
	z-index: var(--z-panel);
}

.canvas-info {
	position: absolute;
	top: var(--spacing-md);
	left: var(--spacing-md);
	display: flex;
	gap: var(--spacing-sm);
	z-index: var(--z-panel);
}

.canvas-info-badge {
	padding: var(--spacing-xs) var(--spacing-sm);
	font-size: var(--font-size-xs);
	font-family: var(--font-family-mono);
	color: var(--color-text-secondary);
	background-color: rgba(26, 26, 29, 0.9);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-sm);
}

/* Canvas cursor states */
.canvas-container.panning {
	cursor: grabbing;
}

.canvas-container.can-pan {
	cursor: grab;
}

/* Grid overlay toggle indicator */
.grid-visible .canvas-grid-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
}

/* Sprite hover highlight */
.sprite-tooltip {
	position: fixed;
	padding: var(--spacing-sm);
	background-color: var(--color-bg-elevated);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-md);
	box-shadow: var(--shadow-lg);
	z-index: var(--z-tooltip);
	pointer-events: none;
	font-size: var(--font-size-xs);
	max-width: 200px;
}

.sprite-tooltip-name {
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-primary);
	margin-bottom: var(--spacing-xs);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sprite-tooltip-info {
	display: grid;
	grid-template-columns: auto auto;
	gap: var(--spacing-xs) var(--spacing-sm);
	font-family: var(--font-family-mono);
}

.sprite-tooltip-label {
	color: var(--color-text-muted);
}

.sprite-tooltip-value {
	color: var(--color-text-secondary);
	text-align: right;
}

/* Zoom indicator animation */
.zoom-indicator {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: var(--spacing-sm) var(--spacing-lg);
	font-size: var(--font-size-lg);
	font-family: var(--font-family-mono);
	color: var(--color-text-primary);
	background-color: rgba(26, 26, 29, 0.9);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-md);
	z-index: var(--z-panel);
	opacity: 0;
	transition: opacity var(--transition-fast);
	pointer-events: none;
}

.zoom-indicator.visible {
	opacity: 1;
}

/* Drop zone styling - just outline, no text */
.canvas-container.drop-active {
	outline: 2px dashed var(--color-accent);
	outline-offset: -4px;
}