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

.gt .bt-contrast {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 9px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.6;
	white-space: nowrap;
	border-radius: 999px;
	cursor: help;
}
.gt .bt-contrast::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.gt .bt-contrast.is-good { color: var(--ct-ok); background: color-mix(in srgb, var(--ct-ok) 12%, transparent); }
.gt .bt-contrast.is-ok { color: var(--ct-warn); background: color-mix(in srgb, var(--ct-warn) 12%, transparent); }
.gt .bt-contrast.is-low { color: var(--ct-err); background: color-mix(in srgb, var(--ct-err) 12%, transparent); }

.gt .bt-head-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.gt .bt-head-tools .gt-bg { margin-left: 0; }

.gt [data-gt="code"].ce { height: clamp(260px, 42vh, 460px); }