/*
 * Block styles "Passport stamps" (is-style-stamps) and "Pills" (is-style-pills)
 * for core/post-terms and for the companion plugin's taikinapoika/term-list.
 *
 * The plugin's list is <ul><li><a><span class="tp-term__name"> <span
 * class="tp-term__count">; Post Terms is a row of links with separators.
 */

/* ---- Shared ---- */

.wp-block-taikinapoika-term-list:is(.is-style-stamps, .is-style-pills) {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin-block: 0;
	padding: 0;
}

.wp-block-taikinapoika-term-list:is(.is-style-stamps, .is-style-pills) > li {
	margin: 0;
	max-width: 100%;
}

.wp-block-post-terms:is(.is-style-stamps, .is-style-pills) {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
}

.wp-block-post-terms:is(.is-style-stamps, .is-style-pills) .wp-block-post-terms__separator {
	display: none;
}

/* ---- Stamps ---- */

.wp-block-taikinapoika-term-list.is-style-stamps {
	gap: 1.125rem 1rem;
}

.wp-block-taikinapoika-term-list.is-style-stamps > li > a {
	align-items: center;
	border: 3px double currentcolor;
	border-radius: var(--wp--custom--radius--stamp);
	color: var(--wp--preset--color--tomato-text);
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: 100%;
	min-height: 6rem;
	min-width: 9.375rem;
	padding: 0.875rem 1.375rem;
	rotate: calc(var(--tpt-tilt, 1deg) * var(--tpt-tilt-scale, 1));
	text-align: center;
	text-decoration: none;
}

.wp-block-taikinapoika-term-list.is-style-stamps .tp-term__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.375rem;
	letter-spacing: 0.06em;
	line-height: 1.2;
	overflow-wrap: anywhere;
	text-transform: uppercase;
}

/*
 * A stamp says "30 POSTS", not "30". The plugin prints the bare number for the
 * eye and the phrase for screen readers; on a stamp the phrase is shown to
 * everyone and the bare number is dropped. When the plugin prints only the
 * number (no phrase beside it), the number stays.
 */
.wp-block-taikinapoika-term-list.is-style-stamps .tp-term__count,
.wp-block-taikinapoika-term-list.is-style-stamps .tp-term__count + .screen-reader-text {
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
}

.wp-block-taikinapoika-term-list.is-style-stamps .tp-term__count:has(+ .screen-reader-text) {
	display: none;
}

.wp-block-taikinapoika-term-list.is-style-stamps .tp-term__count + .screen-reader-text {
	clip-path: none;
	height: auto;
	margin: 0;
	overflow: visible;
	position: static;
	width: auto;
}

/* Every other stamp is in ink, every third one round-ended, none at the same angle as its neighbour. */
.wp-block-taikinapoika-term-list.is-style-stamps > li:nth-child(even) > a {
	color: var(--wp--preset--color--contrast);
}

.wp-block-taikinapoika-term-list.is-style-stamps > li:nth-child(3n + 2) > a {
	border-radius: var(--wp--custom--radius--pill);
}

.wp-block-taikinapoika-term-list.is-style-stamps > li:nth-child(10n + 1) {
	--tpt-tilt: -3deg;
}

.wp-block-taikinapoika-term-list.is-style-stamps > li:nth-child(10n + 2) {
	--tpt-tilt: 2deg;
}

.wp-block-taikinapoika-term-list.is-style-stamps > li:nth-child(10n + 3) {
	--tpt-tilt: 1deg;
}

.wp-block-taikinapoika-term-list.is-style-stamps > li:nth-child(10n + 4) {
	--tpt-tilt: -2deg;
}

.wp-block-taikinapoika-term-list.is-style-stamps > li:nth-child(10n + 5) {
	--tpt-tilt: 3deg;
}

.wp-block-taikinapoika-term-list.is-style-stamps > li:nth-child(10n + 6) {
	--tpt-tilt: -1deg;
}

.wp-block-taikinapoika-term-list.is-style-stamps > li:nth-child(10n + 7) {
	--tpt-tilt: 2deg;
}

.wp-block-taikinapoika-term-list.is-style-stamps > li:nth-child(10n + 8) {
	--tpt-tilt: -3deg;
}

.wp-block-taikinapoika-term-list.is-style-stamps > li:nth-child(10n + 9) {
	--tpt-tilt: 1deg;
}

.wp-block-taikinapoika-term-list.is-style-stamps > li:nth-child(10n + 10) {
	--tpt-tilt: -2deg;
}

/* The small stamps over a post's title. */
.wp-block-post-terms.is-style-stamps {
	gap: 0.75rem;
}

.wp-block-post-terms.is-style-stamps a {
	align-items: center;
	border: 3px double currentcolor;
	border-radius: 0.75rem;
	color: var(--wp--preset--color--tomato-text);
	display: inline-flex;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.0625rem;
	letter-spacing: 0.08em;
	line-height: 1.2;
	min-height: 2.75rem;
	overflow-wrap: anywhere;
	padding: 0.375rem 1.125rem;
	rotate: calc(-3deg * var(--tpt-tilt-scale, 1));
	text-decoration: none;
	text-transform: uppercase;
}

.wp-block-post-terms.is-style-stamps a:nth-of-type(even) {
	color: var(--wp--preset--color--contrast);
	rotate: calc(2deg * var(--tpt-tilt-scale, 1));
}

.wp-block-taikinapoika-term-list.is-style-stamps > li > a:hover,
.wp-block-taikinapoika-term-list.is-style-stamps > li > a:focus,
.wp-block-post-terms.is-style-stamps a:hover,
.wp-block-post-terms.is-style-stamps a:focus {
	background: var(--wp--preset--color--paper);
}

/*
 * On the ink panel ink would vanish: stamps are butter and cream there, and
 * turn to ink on paper under the pointer. `.wp-block-group` is in these
 * selectors to outweigh the panel's own rule for links (core-group.css).
 */
.wp-block-group.is-style-panel-ink .wp-block-taikinapoika-term-list.is-style-stamps > li > a,
.wp-block-group.is-style-panel-ink .wp-block-post-terms.is-style-stamps a {
	color: var(--wp--preset--color--butter);
}

.wp-block-group.is-style-panel-ink .wp-block-taikinapoika-term-list.is-style-stamps > li:nth-child(even) > a,
.wp-block-group.is-style-panel-ink .wp-block-post-terms.is-style-stamps a:nth-of-type(even) {
	color: var(--wp--preset--color--base);
}

.wp-block-group.is-style-panel-ink .wp-block-taikinapoika-term-list.is-style-stamps > li > a:is(:hover, :focus),
.wp-block-group.is-style-panel-ink .wp-block-post-terms.is-style-stamps a:is(:hover, :focus) {
	color: var(--wp--preset--color--contrast);
}

/* ---- Pills ---- */

.wp-block-taikinapoika-term-list.is-style-pills {
	gap: 0.75rem;
}

.wp-block-taikinapoika-term-list.is-style-pills > li > a {
	align-items: center;
	background: var(--wp--preset--color--butter);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--contrast);
	display: inline-flex;
	font-size: 1.1875rem;
	font-weight: 800;
	gap: 0.625rem;
	line-height: 1.2;
	max-width: 100%;
	min-height: 3.5rem;
	overflow-wrap: anywhere;
	padding: 0.5rem 1.625rem;
	text-decoration: none;
}

.wp-block-taikinapoika-term-list.is-style-pills .tp-term__count {
	font-weight: 500;
}

.wp-block-post-terms.is-style-pills {
	gap: 0.5rem;
}

.wp-block-post-terms.is-style-pills a {
	align-items: center;
	background: var(--wp--preset--color--butter);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--contrast);
	display: inline-flex;
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.2;
	min-height: 2.75rem;
	overflow-wrap: anywhere;
	padding: 0.25rem 1.125rem;
	text-decoration: none;
}

.wp-block-taikinapoika-term-list.is-style-pills > li > a:hover,
.wp-block-taikinapoika-term-list.is-style-pills > li > a:focus,
.wp-block-post-terms.is-style-pills a:hover,
.wp-block-post-terms.is-style-pills a:focus {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* On the ink panel a pill keeps its ink on butter (the panel would make its link butter), and turns cream under the pointer. */
.wp-block-group.is-style-panel-ink .wp-block-taikinapoika-term-list.is-style-pills > li > a,
.wp-block-group.is-style-panel-ink .wp-block-post-terms.is-style-pills a {
	color: var(--wp--preset--color--contrast);
}

.wp-block-group.is-style-panel-ink .wp-block-taikinapoika-term-list.is-style-pills > li > a:is(:hover, :focus),
.wp-block-group.is-style-panel-ink .wp-block-post-terms.is-style-pills a:is(:hover, :focus) {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}