/**
 * BootHack Tag Cloud (2.0.0)
 *
 * Two presentations of one list. The pill list is what the server sends
 * and what stays if the layout script never runs; the cloud is the same
 * list with its items positioned, which the script signals by adding
 * .bh-tag-cloud--laid-out. Everything cloud-specific is therefore scoped
 * to that class, so the fallback cannot be affected by a rule meant for
 * the cloud.
 *
 * Per-tag values arrive as custom properties on each link, set by PHP:
 *
 *   --bhtc-bg          pill background for that popularity step
 *   --bhtc-ink         pill label colour, chosen for contrast on --bhtc-bg
 *   --bhtc-cloud       cloud text colour for a light page
 *   --bhtc-cloud-dark  cloud text colour for a dark page
 *   --bhtc-size        font size for that step
 *
 * Two cloud inks exist because which one applies is a media query's
 * decision and PHP cannot make it. Both are derived from the same
 * configured colour and both are checked against 4.5:1 before they are
 * written out — see includes/colour.php.
 *
 * 1.x keyed its selectors to `a.link-light`, a Bootstrap class the PHP
 * hardcoded. On the six other frameworks BootHack supports that class
 * means nothing, so the plugin's own styling hung off a class name its
 * host theme had no reason to define. Every selector here is the plugin's.
 */

.bh-tag-cloud {
	--bhtc-gap: 0.4rem;
	--bhtc-focus: currentColor;
}

.bh-tag-cloud__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--bhtc-gap);
	align-items: center;
}

.bh-tag-cloud__item {
	margin: 0;
}

.bh-tag-cloud__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-size: var(--bhtc-size, 1rem);
	line-height: 1.25;
	text-decoration: none;
	border-radius: 999px;
	padding: 0.35em 0.85em;
	background-color: var(--bhtc-bg, transparent);
	color: var(--bhtc-ink, #fff);
	/* A long tag name must wrap rather than widen the container. */
	overflow-wrap: break-word;
	word-break: break-word;
}

.bh-tag-cloud__link:hover,
.bh-tag-cloud__link:focus-visible {
	text-decoration: underline;
}

/*
 * The focus ring is drawn with outline rather than a border or a shadow so
 * it cannot change the element's size — in the cloud, a focus style that
 * resized a word would push it out of the position the layout chose for
 * it. `outline-offset` keeps the ring clear of the pill's own background.
 */
.bh-tag-cloud__link:focus-visible {
	outline: 2px solid var(--bhtc-focus);
	outline-offset: 2px;
}

.bh-tag-cloud__icon {
	font-style: normal;
}

/*
 * The post count, available to assistive technology and to anything
 * reading the text, and not shown.
 *
 * This is the standard visually-hidden pattern rather than
 * `display: none` or `visibility: hidden`, both of which would take the
 * count out of the accessible name entirely. 1.x put the count in an
 * aria-label, which REPLACED the link's name; here it is part of it.
 */
.bh-tag-cloud__count {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.bh-tag-cloud__empty {
	margin: 0;
}

/* ---------------------------------------------------------------------
 * Cloud layout
 *
 * Only active once the script has placed every word. Until then — and
 * for ever, if the script does not run, the container is too narrow, or
 * the words will not fit — the rules above are the whole stylesheet.
 * ------------------------------------------------------------------ */

.bh-tag-cloud--laid-out .bh-tag-cloud__list {
	display: block;
	position: relative;
	animation: bh-tag-cloud-in 200ms ease-out;
}

.bh-tag-cloud--laid-out .bh-tag-cloud__item {
	position: absolute;
	/*
	 * Overwritten by the script per item. Declared so an item has
	 * somewhere to be if a paint lands between the class going on and
	 * the inline positions being written.
	 */
	left: 50%;
	top: 50%;
	white-space: nowrap;
}

.bh-tag-cloud--laid-out .bh-tag-cloud__link {
	/*
	 * No pill in the cloud: the word is the thing. The background goes,
	 * most of the padding goes with it, and the colour switches from the
	 * label ink to the contrast-corrected cloud ink.
	 */
	background-color: transparent;
	color: var(--bhtc-cloud, currentColor);
	padding: 0.1em 0.15em;
	border-radius: 0.2em;
	font-weight: 600;
	line-height: 1;
}

.bh-tag-cloud--laid-out .bh-tag-cloud__link:hover,
.bh-tag-cloud--laid-out .bh-tag-cloud__link:focus-visible {
	/*
	 * Underline is the hover affordance in the list, but under a rotated
	 * word at 34px it reads as a stray rule, so the cloud marks hover
	 * with the pill background instead — the one place the two
	 * presentations deliberately differ.
	 */
	text-decoration: none;
	background-color: var(--bhtc-bg);
	color: var(--bhtc-ink);
}

/*
 * Fade in, because the list is painted first and the words then move.
 * Swapping instantly reads as a glitch; a short fade reads as loading.
 */
@keyframes bh-tag-cloud-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bh-tag-cloud--laid-out .bh-tag-cloud__list {
		animation: none;
	}
}

/* ---------------------------------------------------------------------
 * Dark scheme
 *
 * Only the cloud ink changes. A pill carries its own background, so it
 * is legible against any page; a cloud word is coloured text on the
 * page's own background, so it needs the variant PHP derived for a dark
 * backdrop.
 *
 * Scoped to the laid-out cloud for that reason — applying it to the list
 * would recolour text that is sitting on a pill.
 * ------------------------------------------------------------------ */

@media (prefers-color-scheme: dark) {
	.bh-tag-cloud--laid-out .bh-tag-cloud__link {
		color: var(--bhtc-cloud-dark, var(--bhtc-cloud, currentColor));
	}
}

/*
 * Themes that set a scheme explicitly rather than leaving it to the media
 * query. BootHack writes data-theme on the root element; these selectors
 * are inert on a theme that does not, and each one needs to beat the
 * media query above, which is why they are separate rules rather than
 * additions to it.
 */
:root[data-theme="dark"] .bh-tag-cloud--laid-out .bh-tag-cloud__link {
	color: var(--bhtc-cloud-dark, var(--bhtc-cloud, currentColor));
}

:root[data-theme="light"] .bh-tag-cloud--laid-out .bh-tag-cloud__link {
	color: var(--bhtc-cloud, currentColor);
}

/*
 * Forced-colours mode replaces the palette entirely, so the whole point
 * of the scale is gone and asserting colours would only fight the user's
 * own. Keep the shapes and let the system colours through.
 */
@media (forced-colors: active) {
	.bh-tag-cloud__link {
		background-color: ButtonFace;
		color: ButtonText;
		border: 1px solid ButtonBorder;
	}

	.bh-tag-cloud--laid-out .bh-tag-cloud__link {
		background-color: transparent;
		border: 0;
		color: LinkText;
	}
}