/*
 * rooster/list, variant chips (the page agents' gaps, package B): the legacy LMS landing's tiles, pills and question
 * lines (themes/om-portal-theme/templates/landing-rooster-lms.php: `ul.lmsl-tiles`, `ul.lmsl-chips`, `ul.lmsl-qlist`),
 * complete on its own. The tone is the block's (the page's or the section's accent without one): the soft tint is
 * its accent at 16 % over the surface (20 % on a dark one, the legacy's), the ink its text shade kept readable on that
 * tint (no lighter than oklch 0.45 on a light surface, no darker than 0.78 on a dark one: the comparison's group rows'
 * rule); the tiles' words in the contrast ink. Relative colours: a browser without them draws the items untinted in
 * the text colour. Compiled by build/blocks-css.mjs.
 */

@import "../../theme.css";

.rooster-chips {
	--rooster-chips-tint: light-dark(rgb(from var(--wp--preset--color--accent) r g b / 16%), rgb(from var(--wp--preset--color--accent) r g b / 20%));
	--rooster-chips-ink: light-dark(oklch(from var(--wp--preset--color--accent-text) min(l, 0.45) c h), oklch(from var(--wp--preset--color--accent-text) max(l, 0.78) c h));
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	align-items: flex-start;
	gap: 8px;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--wp--preset--color--contrast-2, light-dark(#45556c, #cad5e2));
	overflow-wrap: normal;
	word-break: normal;
}

.rooster-chips > li {
	box-sizing: border-box;
	margin: 0;
}

.rooster-chips .rooster-chips__icon {
	display: block;
	flex: none;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	color: var(--rooster-chips-ink);
}

/* Tiles: the icon and the words on the tint, 10 px corners. */
.rooster-chips--tiles > li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: 10px;
	background: var(--rooster-chips-tint);
	color: var(--wp--preset--color--contrast, light-dark(#020618, #ffffff));
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
}

/* Pills: the words in the tone's ink on the tint, fully rounded. */
.rooster-chips--pills > li {
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--rooster-chips-tint);
	color: var(--rooster-chips-ink);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}

/* Lines: one under another, the icon before the words, 2 px down to sit on the first line. */
.rooster-chips.rooster-chips--lines {
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 10px;
}

.rooster-chips--lines > li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.rooster-chips--lines .rooster-chips__icon {
	margin-top: 2px;
}

.rooster-chips :is(strong, b) {
	font-weight: 600;
}