/* Hex chips in articles (inc/hex-chips.php): a dot of the color + the code,
   opening the color's page, with a copy button at the end. */

.sw-hex {
	display: inline-flex;
	align-items: center;
	vertical-align: baseline;
	margin: 0 1px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.07);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
	line-height: 1.2;
	white-space: nowrap;
	transition: background-color 150ms ease, box-shadow 150ms ease;
}

.sw-hex:hover,
.sw-hex:focus-within { background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hx) 70%, #fff); }

/* Beat article link styles (.kb-article a …) without !important */
.sw-hex a.sw-hex-link,
.sw-hex a.sw-hex-link:hover,
.sw-hex a.sw-hex-link:visited {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 4px 2px 3px;
	border: 0;
	background: none;
	color: inherit;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.86em;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-decoration: none;
	box-shadow: none;
}

.sw-hex a.sw-hex-link::before,
.sw-hex a.sw-hex-link::after { content: none; display: none; }

.sw-hex-link i {
	flex: none;
	width: 1em;
	height: 1em;
	border-radius: 50%;
	background: var(--hx);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.sw-hex-copy {
	display: inline-grid;
	place-items: center;
	width: 1.5em;
	height: 1.5em;
	margin: 0 2px 0 -2px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	opacity: 0.55;
	cursor: pointer;
	transition: opacity 150ms ease, background-color 150ms ease, width 180ms ease, margin 180ms ease;
}

.sw-hex-copy:hover,
.sw-hex-copy:focus-visible { opacity: 1; background: rgba(255, 255, 255, 0.14); }
.sw-hex-copy:focus-visible { outline: 2px solid var(--hx); outline-offset: 1px; }
.sw-hex-copy.is-done { opacity: 1; color: #7ee2a8; }

/* With a mouse the copy button tucks away until you point at the chip */
@media (hover: hover) {
	.sw-hex-copy { width: 0; margin: 0; opacity: 0; overflow: hidden; }
	.sw-hex:hover .sw-hex-copy,
	.sw-hex:focus-within .sw-hex-copy,
	.sw-hex-copy.is-done { width: 1.5em; margin: 0 2px 0 -2px; opacity: 0.6; }
	.sw-hex .sw-hex-copy:hover,
	.sw-hex .sw-hex-copy.is-done { opacity: 1; }
}

.sw-hex-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	z-index: 100000;
	padding: 10px 16px;
	border-radius: 999px;
	background: #fff;
	color: #111;
	font: 700 0.9rem/1.2 system-ui, sans-serif;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
	transform: translate(-50%, 20px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 180ms ease, transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sw-hex-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
	.sw-hex, .sw-hex-copy, .sw-hex-toast { transition: none; }
}