/*
 * Glyph: the small fill-path arrows, chevrons and marks inside components.
 *
 * Not the CMS iconset. Icons are content, picked by the editor from a set
 * that may be swapped (A5). Glyphs are chrome: the arrow in a button, the
 * chevron in a breadcrumb, the download mark on a document row. They live as
 * files in assets/icons/glyphs/ and are rendered inline with Kirby's
 * svg() helper (D22):
 *
 *   <?= svg('assets/icons/glyphs/arrow-right.svg') ?>
 *
 * Every file is a 20 viewBox with a single filled path, drawn to match the
 * 1.6 square-capped stroke on the canvases, so the class only has to size it.
 */

@layer vdt.components {
	.vdt-glyph {
		flex: none;
		width: var(--vdt-glyph);
		height: var(--vdt-glyph);
		fill: currentColor;
	}

	.vdt-glyph--button {
		width: var(--vdt-glyph-button);
		height: var(--vdt-glyph-button);
	}

	.vdt-glyph--link {
		width: var(--vdt-glyph-link);
		height: var(--vdt-glyph-link);
	}

	/* An icon from the CMS set, sized for a side-list row or a card slot. */
	.vdt-icon {
		flex: none;
		width: var(--vdt-icon);
		height: var(--vdt-icon);
		fill: currentColor;
		color: var(--vdt-icon-active);
	}

	.vdt-icon--lg {
		width: var(--vdt-icon-lg);
		height: var(--vdt-icon-lg);
	}

	.vdt-icon--inactive {
		color: var(--vdt-icon-inactive);
	}

	/* Either class may wrap the <svg> in a span; the svg fills whatever it is in. */
	.vdt-glyph,
	.vdt-icon {
		display: inline-flex;
	}

	.vdt-glyph > svg,
	.vdt-icon > svg {
		width: 100%;
		height: 100%;
	}

	/* Other wrappers that carry a glyph: the nav chevron, the breadcrumb separator. */
	.vdt-navbar__chevron > svg,
	.vdt-breadcrumb__separator > svg,
	.vdt-side-list__slot > svg {
		width: 100%;
		height: 100%;
	}
}