.codexec {
	@apply space-y-2 relative;
}

.codexec > button {
	@apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 bg-transparent absolute top-3 right-8 z-10 size-7 hover:opacity-100 focus-visible:opacity-100;
}

.codexec > button > svg.play {
	@apply inline-block;
}

.codexec > button > svg.loading {
	@apply hidden;
}

.codexec > button[data-status="loading"] > svg.play {
	@apply hidden;
}

.codexec > button[data-status="loading"] > svg.loading {
	@apply inline-block;
}

.codexec-result {
	@apply bg-slate-50 text-muted-foreground rounded-xl;
}

.codexec-result.error {
	@apply bg-destructive/5 text-destructive;
}

.codexec-result > pre {
	@apply p-4 m-0 font-mono empty:p-0;
}
