/*
 * Chips (docs/DESIGN_SYSTEM.md sections 8.2 and 8.12): short links in a row, such as the course categories. A pill
 * 36 px high on the light tint, with a 44 px target (the link reaches 4 px beyond the pill above and below; the row gap
 * keeps neighbouring targets apart). The current page's chip is selected: primary fill, white label. Every chip is a
 * real link.
 *
 * Markup: <ul class="chips"><li><a class="chip" href="…">Lash</a></li>…</ul> (template-parts/sections/category-chips.php).
 */
@layer components {
	.chips {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2);
		padding: 0;
		list-style: none;
	}

	.chip {
		position: relative;
		display: inline-flex;
		align-items: center;
		min-height: var(--size-chip);
		padding-inline: var(--space-4);
		border: 1px solid transparent;
		border-radius: var(--radius-pill);
		background: var(--color-surface-tint);
		color: var(--color-text);
		font-size: var(--fs-small);
		font-weight: 600;
		line-height: var(--lh-small);
		text-decoration: none;
		transition:
			background-color var(--dur-fast) var(--ease-out),
			color var(--dur-fast) var(--ease-out);
	}

	/* The 44 px target around the 36 px pill. The pseudo-element is placed from inside the pill's 1 px border
	   (0.0625rem), so it reaches that much further. */
	.chip::before {
		position: absolute;
		inset: calc((var(--size-chip) - var(--size-control-sm)) / 2 - 0.0625rem) 0;
		content: "";
	}

	/* On the light tint the pill is white with a hairline, so it still reads as a pill. */
	.section--tint .chip {
		border-color: var(--color-line);
		background: var(--color-surface);
	}

	@media (hover: hover) {
		.chip:hover,
		.section--tint .chip:hover {
			background: var(--color-surface-tint-2);
			color: var(--color-text);
		}
	}

	.chip[aria-current="page"],
	.section--tint .chip[aria-current="page"] {
		border-color: var(--color-primary);
		background: var(--color-primary);
		color: var(--color-text-inverse);
	}

	@media (forced-colors: active) {
		.chip {
			border-color: LinkText;
		}

		.chip[aria-current="page"] {
			border-width: 2px;
		}
	}
}