.codeRow{
	width:100%;
	margin-top:16px;
	display:flex;
	gap:10px;
	flex-wrap:wrap;
}

.codePill{
	display:inline-flex;
	align-items:center;
	gap:10px;
	max-width:100%;
	padding:8px 8px 8px 14px;
	border-radius:14px;
	border:2px dashed rgba(78,163,255,.55);
	background:rgba(78,163,255,.08);
	color:var(--text);
	font-weight:900;
	font-size:var(--fs-tech);
	cursor:pointer;
	-webkit-tap-highlight-color:transparent;
}

.codePill:focus-visible{
	outline:2px solid var(--link);
	outline-offset:2px;
}

.codeLabel{
	color:var(--muted);
	letter-spacing:.25px;
}

.codeValue{
	letter-spacing:.3px;
	min-width:0;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

.codeIcon{
	flex:0 0 42px;
	margin-left:auto;
	display:grid;
	place-items:center;
	color:var(--link);
}

.codeIconGlyph,
.codeIconCheck{
	grid-area:1/1;
	font-size:20px;
	line-height:1;
	transition:opacity .18s ease, transform .18s ease;
}

.codeIconGlyph{
	opacity:1;
	transform:scale(1);
}

.codeIconCheck{
	opacity:0;
	transform:scale(.65);
}

.codePill[data-copied="1"]{
	border-color:var(--link);
	background:rgba(78,163,255,.12);
}

.codePill[data-copied="1"] .codeIconGlyph{
	opacity:0;
	transform:scale(.65);
}

.codePill[data-copied="1"] .codeIconCheck{
	opacity:1;
	transform:scale(1);
}

@media (max-width: 859.98px){
	.codePill {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce){
	.codeIconGlyph,
	.codeIconCheck{
		transition:none;
	}
}