/**
 * Jump links, the news front's row (news.css) as a component: outlined
 * pills 32px tall, 14px at weight 500, 14px of padding each side, white
 * with a --sba-border hairline, the border --sba-red and the text
 * --sba-red-dark on hover; 8px between pills, and the row wraps so every
 * anchor stays visible on a phone. A link that leaves the page carries its
 * arrow 6px after the label. The glass tone is the guide's glass pill
 * (button.css, sba-c-button-pill): white at 10% under a 4px blur with a
 * white border at 40%, solid white on hover.
 */

.sba-c-jump-links ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sba-c-jump-links li {
	margin: 0;
}

.sba-c-jump-links a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 0 14px;
	border: 1px solid var(--sba-border);
	border-radius: 9999px;
	background-color: var(--sba-surface);
	color: var(--sba-charcoal);
	font-family: var(--sba-font-sans);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	text-decoration: none;
	transition:
		background-color var(--sba-duration-hover) ease,
		border-color var(--sba-duration-hover) ease,
		color var(--sba-duration-hover) ease;
}

.sba-c-jump-links a:hover,
.sba-c-jump-links a:focus {
	border-color: var(--sba-red);
	color: var(--sba-red-dark);
	text-decoration: none;
}

.sba-c-jump-links a:focus-visible {
	outline: 2px solid var(--sba-ring);
	outline-offset: 2px;
}

.sba-c-jump-links a .sba-i {
	margin-left: 6px;
	font-size: 16px;
	line-height: 1;
}

/* The action pill: the explore pages' "Add" pill (listing-cards.css,
   sba-explore-add), its border the charcoal at 20%, the plus 6px after the
   label; at the right of the row from 768px. */
.sba-c-jump-links .sba-c-jump-links-action a {
	gap: 6px;
	padding: 0 16px;
	border-color: hsl(var(--sba-charcoal-hsl) / 0.2);
	white-space: nowrap;
}

.sba-c-jump-links .sba-c-jump-links-action a:hover,
.sba-c-jump-links .sba-c-jump-links-action a:focus {
	border-color: var(--sba-red);
}

@media (min-width: 768px) {
	.sba-c-jump-links .sba-c-jump-links-action {
		margin-left: auto;
	}
}

.sba-c-jump-links-glass a {
	border-color: hsl(0 0% 100% / 0.4);
	background-color: hsl(0 0% 100% / 0.1);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	color: #fff;
}

.sba-c-jump-links-glass a:hover,
.sba-c-jump-links-glass a:focus {
	border-color: #fff;
	background-color: #fff;
	color: var(--sba-charcoal);
}