shelving/ui/block/Block.module.css

Toolkit for using data in JavaScript.

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

@layer components {
	.block {
		position: relative;
		display: block;
		margin-inline: 0;
		margin-block: var(--block-spacing, var(--spacing-section));
	}

	/* Plain semantic blocks inside prose pick up the same spacing as a <Block>. */
	.prose :where(section, article, aside, nav, header, footer, figure) {
		margin-inline: 0;
		margin-block: var(--block-spacing, var(--spacing-section));
	}

	/* Scrollable region — keyboard-focusable horizontal scroll container. */
	.scrollable,
	.prose [role="region"][tabindex="0"] {
		overflow-x: auto;
		overscroll-behavior: contain;

		&:focus-visible {
			outline: var(--focus-stroke, var(--stroke-thick)) solid var(--focus-color, var(--color-focus));
			outline-offset: var(--focus-offset, var(--space-xxsmall));
		}

		/* Stretch the inner block to fill the scroll container so short content still spans the width. */
		> :is(table, pre) {
			min-width: 100%;
		}

		/* Force long lines so they trigger horizontal scroll instead of wrapping. */
		> pre {
			width: max-content;
			white-space: pre;
			overflow-wrap: normal;
		}

		/* Caption stays pinned to the left during horizontal scroll. */
		> :is(.caption, figcaption) {
			position: sticky;
			left: 0;
		}
	}

	.caption,
	.prose figcaption {
		display: block;
		margin-block: var(--caption-gap, var(--space-xsmall));
		font-size: var(--caption-size, var(--size-small));
		text-align: var(--caption-align, left);
	}

	/* Captions have tighter margins than most block elements, so zero the abutting margin of any */
	/* neighbouring sibling — otherwise margin collapse would let the bigger neighbour margin win, */
	/* drifting the caption away from its content. */
	.caption + *,
	.prose figcaption + * {
		margin-block-start: 0;
	}
	:has(+ .caption),
	.prose :has(+ figcaption) {
		margin-block-end: 0;
	}
}

@layer overrides {
	.block,
	.prose :where(section, article, aside, nav, header, footer, figure),
	.caption,
	.prose figcaption {
		&:first-child {
			margin-block-start: 0;
		}
		&:last-child {
			margin-block-end: 0;
		}
	}
}