/*
 * Flow line (Knowledge article): "RFID Tag → Reader → Software / System".
 *
 * Boxes 52 tall with an ink border, 16 / 600, and an arrow glyph in the brand
 * colour between them. Wraps on narrow screens.
 *
 *   <ol class="vdt-flow-line">
 *     <li class="vdt-flow-line__step">RFID Tag</li>
 *     <li class="vdt-flow-line__arrow" aria-hidden="true"><?= svg(…arrow-right.svg) ?></li>
 *     <li class="vdt-flow-line__step">Reader</li>
 *   </ol>
 *
 * The arrow is its own list item so the step count stays honest for
 * assistive tech only if it is hidden, which aria-hidden does.
 */

@layer vdt.components {
	.vdt-flow-line {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--vdt-space-12);
		list-style: none;
	}

	.vdt-flow-line__step {
		display: inline-flex;
		align-items: center;
		min-height: 3.25rem;
		padding: var(--vdt-space-8) var(--vdt-space-20);
		border: var(--vdt-rule-width) solid var(--vdt-rule);
		color: var(--vdt-text-heading);
		font-size: var(--vdt-size-16);
		font-weight: var(--vdt-weight-semibold);
		line-height: 1.2;
	}

	.vdt-flow-line__arrow {
		display: inline-flex;
		color: var(--vdt-text-brand);
	}

	.vdt-flow-line__arrow svg {
		width: var(--vdt-glyph);
		height: var(--vdt-glyph);
	}
}