/*-------------------------------------------------------
Post terms
-------------------------------------------------------*/

.wp-block-post-terms > * {
	display: inline-block;
}

.wp-block-post-terms:not(.is-style-pill) > a {
	display: inline-block;

	background-image: linear-gradient(to right, var(--wp--preset--color--contrast) 0, var(--wp--preset--color--contrast) 100%);
	background-size: 0 1px;
	background-position: 100% 96%;
	background-repeat: no-repeat;

	transition: color 0.35s ease-in-out, background-size 0.35s ease-in-out;
}

.wp-block-post-terms:not(.is-style-pill) a:hover,
.wp-block-post-terms:not(.is-style-pill) a:focus,
.wp-block-post-terms:not(.is-style-pill) a:active {
	background-size: 100% 1px;
	background-position: 0 96%;
}

/*
Pill
*/

.wp-block-post-terms.is-style-pill > a {
	margin-bottom: 0.75rem;
}

.wp-block-post-terms.is-style-pill > a:not(:last-child) {
	margin-right: 0.5rem;
}

.wp-block-post-terms.is-style-pill > a,
.is-style-pill span:not([class], [data-rich-text-placeholder]) {
	padding: 0.375rem 1rem;

	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--style--block-gap);
	background-color: var(--wp--preset--color--contrast-5);
	border-radius: 2.5rem;
}

.wp-block-post-terms.is-style-pill > a:hover,
.wp-block-post-terms.is-style-pill > a:focus,
.wp-block-post-terms.is-style-pill > a:active {
	color: var(--wp--preset--color--base-2);
	background-color: var(--wp--preset--color--contrast);
}