/*
 * The author's topics as pills (templates/author.html), matching the topic
 * pills on other archives (plainplugins-nav-tab.css) without their colour dot:
 * these filter the list in place and do not go to a topic page.
 */
.pst-author-topics {
	gap: var(--wp--preset--spacing--20);
}

.pst-author-topics .wp-block-plainplugins-taxonomy-filter__item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 40px;
	padding: 0 14px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--preset--border-radius--full);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	text-decoration: none;
}

.pst-author-topics .wp-block-plainplugins-taxonomy-filter__item:hover {
	border-color: var(--wp--preset--color--action);
}

.pst-author-topics .wp-block-plainplugins-taxonomy-filter__item[aria-pressed="true"] {
	border-color: var(--wp--preset--color--action);
	background: var(--wp--preset--color--action-soft);
	font-weight: 600;
}

.pst-author-topics .wp-block-plainplugins-taxonomy-filter__count {
	color: var(--wp--preset--color--muted);
	font-weight: 400;
}

/*
 * One line that scrolls: a Taxonomy Filter whose layout does not wrap (the
 * block's Layout setting "Allow to wrap to multiple lines" off, which core
 * prints as .is-nowrap) scrolls sideways without a scrollbar instead of
 * running out of its box. The edge where more tabs hide fades out, driven by
 * the scroll position, so the fade is gone at the start and at the end and
 * never shows when everything fits. The current item scrolls into view when
 * the page loads. Browsers without scroll-driven animations scroll without
 * the fade.
 */
@property --pst-scroll-fade-start {
	syntax: "<length>";
	inherits: false;
	initial-value: 0px;
}

@property --pst-scroll-fade-end {
	syntax: "<length>";
	inherits: false;
	initial-value: 0px;
}

.wp-block-plainplugins-taxonomy-filter.is-nowrap {
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scroll-padding-inline: 2.5rem;
	scrollbar-width: none;
}

.wp-block-plainplugins-taxonomy-filter.is-nowrap::-webkit-scrollbar {
	display: none;
}

.wp-block-plainplugins-taxonomy-filter.is-nowrap :is(.wp-block-plainplugins-taxonomy-filter__item[aria-pressed="true"], .wp-block-plainplugins-taxonomy-filter__item[aria-current="page"]) {
	scroll-initial-target: nearest;
}

@supports (animation-timeline: scroll()) {
	.wp-block-plainplugins-taxonomy-filter.is-nowrap {
		mask-image: linear-gradient(to right, transparent, #000 var(--pst-scroll-fade-start), #000 calc(100% - var(--pst-scroll-fade-end)), transparent);
		animation: pst-scroll-fade linear both;
		animation-timeline: scroll(self inline);
	}
}

@keyframes pst-scroll-fade {
	0% {
		--pst-scroll-fade-start: 0px;
		--pst-scroll-fade-end: 2.5rem;
	}

	12% {
		--pst-scroll-fade-start: 2.5rem;
	}

	88% {
		--pst-scroll-fade-end: 2.5rem;
	}

	100% {
		--pst-scroll-fade-start: 2.5rem;
		--pst-scroll-fade-end: 0px;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.wp-block-plainplugins-taxonomy-filter.is-nowrap {
		scroll-behavior: smooth;
	}
}