/* Pill. Tokens only (TokenLintTest). */
.c-pill {
	display: inline-flex; align-items: center; gap: var(--space-0-5);
	height: var(--pill-height); padding: 0 var(--space-3-5);
	border-radius: var(--radius-pill);
	border: 1px solid var(--color-outline);
	color: var(--color-text); font-size: var(--text-m); font-weight: 500; white-space: nowrap;
	cursor: pointer; list-style: none;
	transition: background var(--t-state) var(--ease-standard), color var(--t-state) var(--ease-standard), transform var(--t-feedback);
}
.c-pill::-webkit-details-marker { display: none; }
.c-pill:active { transform: scale(0.96); }
.c-pill[aria-current="page"], .c-pill[aria-pressed="true"], .c-pill[data-selected] {
	background: var(--color-light); color: var(--color-on-light); border-color: var(--color-light);
}
.c-pill { max-width: 100%; }
/* A label longer than the screen ends in an ellipsis; the pill itself cannot
   clip, or its touch hit area (::before, past the edge) would be cut off. */
.c-pill__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.c-pill .icon { flex: none; margin-right: calc(-1 * var(--space-1)); }
.c-pill--clear { width: var(--pill-height); padding: 0; flex: none; justify-content: center; border-radius: var(--radius-pill); }
.c-pill--clear .icon { margin-right: 0; }
@media (pointer: coarse) {
	.c-pill { position: relative; }
	.c-pill::before { content: ""; position: absolute; inset: calc(-1 * var(--hit-extend)) calc(-1 * var(--hit-extend-x)); }
}
@media (prefers-reduced-motion: reduce) {
	.c-pill:active { transform: none; }
}