/**
 * Next Translate — Market Paths: filter buttons on market pages and the Countries page (1.2.0).
 *
 * Same look as the "Latest News" country filter on the home page (sliding highlight, small uppercase codes, one row that
 * scrolls sideways when it does not fit). Colours come from the theme tokens, exactly like that block, so the dark-mode
 * toggle applies without any extra work. Every variable can be overridden from the theme (--ntf-accent, --ntf-text …).
 */
.ntf-bar {
	--ntf-accent: var(--nxln-accent, var(--wp--preset--color--primary, #ffcf33));
	--ntf-text: var(--nxln-text, var(--wp--preset--color--main, #222));
	--ntf-on-accent: var(--nxln-on-accent, #000);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--x-small, .75rem) var(--wp--preset--spacing--small, 1rem);
	justify-content: center;
	margin: var(--wp--preset--spacing--x-small, .75rem) 0 var(--wp--preset--spacing--medium, 1.5rem);
	color: var(--ntf-text);
}
html.nxdm-dark .ntf-bar { --ntf-on-accent: #fff; }
.ntf-bar *, .ntf-bar *::before, .ntf-bar *::after { box-sizing: border-box; }

.ntf {
	--ntf-track: rgba(127, 127, 127, .14);
	--ntf-track-border: rgba(127, 127, 127, .28);
	--ntf-hover: rgba(127, 127, 127, .16);
	--ntf-glow: transparent;
	flex: 0 1 auto;
	display: inline-block;
	max-width: 100%;
	min-width: 0;
	padding: 6px;
	margin: -6px;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-tap-highlight-color: transparent;
	color: var(--ntf-text);
}
@supports (color: color-mix(in srgb, red, blue)) {
	.ntf {
		--ntf-track: color-mix(in srgb, currentColor 9%, transparent);
		--ntf-track-border: color-mix(in srgb, currentColor 20%, transparent);
		--ntf-hover: color-mix(in srgb, currentColor 12%, transparent);
		--ntf-glow: color-mix(in srgb, var(--ntf-accent) 38%, transparent);
	}
}
.ntf::-webkit-scrollbar { display: none; }
.ntf.is-overflow-end { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
.ntf.is-overflow-start { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); }
.ntf.is-overflow-start.is-overflow-end { -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); }

.ntf__track {
	position: relative;
	display: inline-block;
	padding: 4px;
	border-radius: 8px;
	background: var(--ntf-track);
	box-shadow: inset 0 0 0 1px var(--ntf-track-border);
	vertical-align: top;
}
.ntf__list {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: nowrap;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ntf__item { margin: 0; padding: 0; list-style: none; }
.ntf .ntf__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 2.6em;
	height: 2.6em;
	margin: 0;
	padding: 0 .7em;
	border: 0;
	border-radius: 6px;
	background: transparent;
	box-shadow: none;
	color: inherit;
	font: inherit;
	font-size: .8125em;
	font-weight: 600;
	letter-spacing: .03em;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	opacity: .72;
	transition: opacity .2s ease, color .2s ease, background-color .2s ease;
}
/* Category names are longer than country codes: normal case, a little more room. */
.ntf--text .ntf__btn { text-transform: none; letter-spacing: .01em; font-size: .875em; padding: 0 1em; }
.ntf .ntf__btn:hover { opacity: 1; background: var(--ntf-hover); text-decoration: none; }
.ntf .ntf__btn:focus:not(:focus-visible) { outline: none; }
.ntf .ntf__btn:focus-visible { outline: 2px solid var(--ntf-accent); outline-offset: 2px; }
.ntf .ntf__item.is-current .ntf__btn { opacity: 1; font-weight: 700; color: var(--ntf-on-accent); background: var(--ntf-accent); box-shadow: 0 2px 8px var(--ntf-glow); }
.ntf__thumb {
	display: none;
	position: absolute;
	z-index: 0;
	top: 4px;
	bottom: 4px;
	left: 0;
	border-radius: 6px;
	background: var(--ntf-accent);
	box-shadow: 0 2px 8px var(--ntf-glow);
}
.ntf.is-enhanced .ntf__thumb { display: block; width: var(--ntf-w, 0); transform: translateX(var(--ntf-x, 0)); }
.ntf .ntf.is-enhanced .ntf__item.is-current .ntf__btn,
.ntf.is-enhanced .ntf__item.is-current .ntf__btn,
.ntf.is-enhanced .ntf__item.is-current .ntf__btn:hover { background: transparent; box-shadow: none; }
.ntf.is-ready .ntf__thumb { transition: transform .38s cubic-bezier(.34, 1.45, .64, 1), width .38s cubic-bezier(.34, 1.45, .64, 1); }
@media (prefers-reduced-motion: reduce) { .ntf.is-ready .ntf__thumb { transition: none; } }