/*!
 * CSS Portal — RGBA generator extras
 * Loaded after code-tool.css and generator-tool.css. Everything is scoped to .gt.
 */

.gt .rg-pick { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.gt .rg-pick .gt-color { flex: 1; min-width: 0; }
.gt .rg-swatch {
	--c: transparent;
	flex: none;
	width: 46px;
	height: 34px;
	border-radius: 8px;
	background: linear-gradient(var(--c), var(--c)), repeating-conic-gradient(#cbd5e1 0 25%, #fff 0 50%) 0 0 / 12px 12px;
	box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .15);
}
.gt .rg-paste {
	box-sizing: border-box;
	width: 100%;
	height: 34px;
	margin: 0;
	padding: 0 10px;
	font: 13px/1 var(--ct-mono);
	color: var(--ct-text);
	background: var(--ct-bg);
	border: 1px solid var(--ct-border);
	border-radius: 8px;
}
.gt .rg-paste:focus { outline: none; border-color: var(--ct-accent); box-shadow: 0 0 0 3px var(--ct-accent-soft); }
.gt .gt-hint.is-err { color: var(--ct-err); }

.gt .rg-formats { display: grid; gap: 0; margin: 0; padding: 4px 16px; list-style: none; }
.gt .rg-formats li {
	display: grid;
	grid-template-columns: minmax(0, 190px) minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 9px 0;
	border-bottom: 1px solid var(--ct-border);
}
.gt .rg-formats li:last-child { border-bottom: 0; }
.gt .rg-formats li > span { font-size: 13px; color: var(--ct-muted); }
.gt .rg-formats code {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding: 0;
	font: 13px/1.5 var(--ct-mono);
	color: var(--ct-text);
	background: none;
}
@media (max-width: 560px) {
	.gt .rg-formats li { grid-template-columns: minmax(0, 1fr) auto; }
	.gt .rg-formats li > span { grid-column: 1 / -1; }
}

.gt [data-gt="code"].ce { height: clamp(140px, 18vh, 200px); }