.mosaic-btn-group__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mosaic-btn-group--column .mosaic-btn-group__list {
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: flex-start;
}

/* Same width: the buttons share the line equally. */
.mosaic-btn-group--equal .mosaic-btn-group__list {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
}

.mosaic-btn-group--equal.mosaic-btn-group--column .mosaic-btn-group__list {
	grid-auto-flow: row;
	grid-auto-columns: auto;
	justify-items: stretch;
}

.mosaic-btn-group--equal .mosaic-btn {
	inline-size: 100%;
}

.mosaic-btn-group__item {
	display: flex;
	min-inline-size: 0;
	max-inline-size: 100%;
}

.mosaic-btn-group__item > .mosaic-btn {
	flex: 0 1 auto;
}

.mosaic-btn-group--equal .mosaic-btn-group__item > .mosaic-btn {
	flex: 1 1 auto;
}

/* On small screens the buttons stack, each as wide as the column. */
@media (max-width: 599px) {
	.mosaic-btn-group--stack .mosaic-btn-group__list {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	.mosaic-btn-group--stack .mosaic-btn-group__item > .mosaic-btn {
		flex: 1 1 auto;
	}
}