/*
 * Topic filter.
 *
 * Same rules as every component stylesheet: design-system `--btx-*` tokens
 * only, a fallback on every var(). See cta-button/style.css for the full note.
 *
 * Two surfaces — the band and the filled pill — each measured in PHP against
 * whatever an editor picked, arriving as `--btxc-topics-*`. Nothing here names
 * a colour token for type.
 *
 * This is the same pill treatment `service-switcher` uses, deliberately: they
 * are the same gesture on two different archives, and a reader who learns one
 * should recognise the other. Keep the radius, padding and current-state
 * weight in step between the two files.
 */

@layer bertex-components {

	.btxc-topics {
		--btxc-topics-bg: transparent;
		--btxc-topics-ink: var( --btx-color-primary-1, #1a2744 );
		--btxc-topics-quiet: var( --btx-color-primary-1-light-40, #2e4578 );
		--btxc-topics-current-bg: var( --btxc-topics-ink );
		--btxc-topics-current-ink: var( --btx-color-text-bg-1, #f9fafb );

		box-sizing: border-box;
		padding-inline: var( --btx-spacing-m, 1.25rem );

		background: var( --btxc-topics-bg );
		color: var( --btxc-topics-ink );
	}

	.btxc-topics__inner {
		box-sizing: border-box;
		max-width: var( --btx-max-width, 1440px );
		margin-inline: auto;

		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: var( --btx-spacing-xs, 0.75rem );
	}

	/*
	 * Bare `monospace`, the same deliberate exception the other components
	 * make: the design system publishes a heading family and a body family and
	 * no third. See the note in booking-panel/style.css.
	 */
	.btxc-topics__label {
		margin-inline-end: var( --btx-spacing-xxs, 0.375rem );

		font-family: monospace;
		font-size: var( --btx-font-body-xs, 0.8125rem );
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var( --btxc-topics-quiet );
	}

	.btxc-topics__list {
		margin: 0;
		padding: 0;
		list-style: none;

		display: flex;
		flex-wrap: wrap;
		gap: var( --btx-spacing-xs, 0.625rem );
	}

	.btxc-topics__item {
		display: flex;
	}

	/*
	 * `!important` on the colours, and no `wp-element-button` on the markup —
	 * the same fix, for the same bug, as `service-switcher`; its stylesheet has
	 * the long version.
	 *
	 * These are links, so theme.json's unlayered link-colour rule would take
	 * them. The pills used to carry core's opt-out class, which escapes that
	 * rule by opting into theme.json's button styling instead — also
	 * unlayered, and it owns background, border, padding and type. Every pill
	 * came out as the global button: filled, bold, oversized, and identical,
	 * so the current topic looked like the rest.
	 */
	.btxc-topics__pill {
		box-sizing: border-box;
		display: inline-flex;
		align-items: center;
		gap: var( --btx-spacing-xxs, 0.375rem );

		padding: 0.5625rem 1rem;

		background: var( --btx-color-text-bg-1, #f9fafb );
		border: 1px solid color-mix( in srgb, var( --btxc-topics-ink ) 18%, transparent );
		border-radius: 9999px;

		font-size: var( --btx-font-body-s, 0.9375rem );
		line-height: var( --btx-line-height-heading, 1.2 );
		text-decoration: none;
		white-space: nowrap;
		color: var( --btxc-topics-quiet ) !important;

		transition:
			background 0.16s ease,
			border-color 0.16s ease,
			color 0.16s ease;
	}

	.btxc-topics__pill:hover {
		border-color: color-mix( in srgb, var( --btxc-topics-ink ) 45%, transparent );
		color: var( --btxc-topics-ink ) !important;
	}

	/*
	 * The topic you are reading. Its label is measured against the fill in PHP,
	 * so a dark navy pill gets paper type and a bright one gets near-black
	 * without a second setting. Still a link, and still marked with
	 * aria-current.
	 */
	.btxc-topics__pill--current {
		background: var( --btxc-topics-current-bg );
		color: var( --btxc-topics-current-ink ) !important;
		border-color: transparent;
		font-weight: 600;
	}

	.btxc-topics__pill--current:hover {
		background: var( --btxc-topics-current-bg );
		color: var( --btxc-topics-current-ink ) !important;
		border-color: transparent;
		filter: brightness( 1.08 );
	}

	.btxc-topics__pill:focus-visible {
		outline: 2px solid var( --btxc-topics-ink );
		outline-offset: 3px;
	}

	/* Tabular so a row of counts does not jitter as the numbers change. */
	.btxc-topics__count {
		font-variant-numeric: tabular-nums;
		opacity: 0.7;
	}

	/* ── Narrow ────────────────────────────────────────────────────────── */

	/*
	 * The pills stay one line each and the row scrolls, rather than wrapping
	 * into five stacked rows that push the articles off the screen. The
	 * negative margin and matching padding restore the page gutter inside the
	 * scroller. Same arrangement as service-switcher.
	 */
	@media ( width < 48rem ) {
		.btxc-topics__inner {
			flex-wrap: nowrap;
			align-items: flex-start;
			flex-direction: column;
		}

		.btxc-topics__list {
			flex-wrap: nowrap;
			align-self: stretch;

			margin-inline: calc( var( --btx-spacing-m, 1.25rem ) * -1 );
			padding-inline: var( --btx-spacing-m, 1.25rem );

			overflow-x: auto;
			scrollbar-width: none;
		}

		.btxc-topics__list::-webkit-scrollbar {
			display: none;
		}
	}
}

@media ( prefers-reduced-motion: reduce ) {
	@layer bertex-components {
		.btxc-topics__pill {
			transition: none;
		}
	}
}