shelving/ui/block/List.module.css

Toolkit for using data in JavaScript.

@import "../style/base.css";

@layer components {
	.unordered,
	.ordered,
	.prose ul,
	.prose ol {
		display: block;
		margin-inline: 0;
		margin-block: var(--list-spacing, var(--spacing-paragraph));

		text-align: left;

		/* Spacing between items — uses standard CSS `gap` (supported on block-level lists since 2024). */
		display: flex;
		flex-direction: column;
		gap: var(--list-gap, var(--space-xsmall));
	}

	.unordered,
	.prose ul {
		padding-inline-start: var(--list-indent, 1.125em);
	}

	.ordered,
	.prose ol {
		padding-inline-start: var(--list-indent, 1.8em);
	}
}

@layer overrides {
	.unordered,
	.ordered,
	.prose ul,
	.prose ol {
		&:first-child {
			margin-block-start: 0;
		}
		&:last-child {
			margin-block-end: 0;
		}
	}
}