/* pi-plugin/assets/css/snippet.css */

.pijs-snippet {
	margin: var( --pi-space-lg ) 0;
	background: var( --pi-color-panel );
}

.pijs-snippet pre {
	margin: 0;
	padding: var( --pi-space-md ) 0;
	font-family: var( --pi-font-family-code );
	font-size: var( --pi-font-size );
	line-height: var( --pi-line-height );
	overflow-x: auto;
	border-radius: 4px;
}

.pijs-snippet code {
	font-family: var(--pi-font-family-code);
	background-color: var( --pi-code-bg );
	border: none;
	padding: 8px;
	color: inherit;
	font-size: inherit;
	white-space: pre;
	box-shadow: 2px 2px 6px 2px var(--pi-color-shadow);
}

/* Ensure proper spacing and formatting */
.pijs-snippet pre code {
	display: block;
	width: 100%;
}

.pijs-snippet-toolbar {
	padding: var( --pi-space-sm ) var( --pi-space-md );
}

.pijs-snippet-buttons {
	display: flex;
	gap: var( --pi-space-sm );
	flex-wrap: wrap;
}

@media (max-width: 768px) {
	.pijs-snippet-buttons {
		gap: var( --pi-space-xs );
		justify-content: space-evenly;
	}
	.pijs-snippet-buttons .btn-retro {
		font-size: 14px;
	}
}