/**
 * Samp Color Formats - Color Styles
 * 
 * Styles for colored <samp> elements in both editor and frontend.
 * The <samp> element represents sample output from a program or system.
 */

/* Base samp styling */
samp {
	font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
	font-size: 0.9em;
	padding: 0.125em 0.25em;
	border-radius: 3px;
	background-color: rgba(0, 0, 0, 0.05);
}

/* Color variants */
samp.red {
	color: #dc3545;
	background-color: rgba(220, 53, 69, 0.1);
}

samp.blue {
	color: #0d6efd;
	background-color: rgba(13, 110, 253, 0.1);
}

samp.brown {
	color: #8b4513;
	background-color: rgba(139, 69, 19, 0.1);
}

samp.green {
	color: #198754;
	background-color: rgba(25, 135, 84, 0.1);
}

/* Editor dropdown color indicators */
.samp-color-formats-dropdown .components-menu-item__item {
	display: flex;
	align-items: center;
	gap: 8px;
}

.samp-color-indicator {
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.2);
	flex-shrink: 0;
}

.samp-color-indicator--red {
	background-color: #dc3545;
}

.samp-color-indicator--blue {
	background-color: #0d6efd;
}

.samp-color-indicator--brown {
	background-color: #8b4513;
}

.samp-color-indicator--green {
	background-color: #198754;
}