.dimu-buttons {
	--dimu-buttons-gap: 16px;
	--dimu-buttons-align: flex-start;
	--dimu-buttons-radius: 999px;
	--dimu-buttons-radius-hover: var(--dimu-buttons-radius);
	--dimu-buttons-pad-y: 16px;
	--dimu-buttons-pad-x: 32px;
	--dimu-buttons-border-width: 1px;

	--dimu-buttons-size: 16px;
	--dimu-buttons-line-height: 1.2;
	--dimu-buttons-tracking: 0px;
	--dimu-buttons-transform: none;
	--dimu-buttons-weight: 600;

	--dimu-buttons-primary-bg: #111;
	--dimu-buttons-primary-text: #fff;
	--dimu-buttons-primary-border: #111;
	--dimu-buttons-primary-bg-hover: var(--dimu-buttons-primary-bg);
	--dimu-buttons-primary-text-hover: var(--dimu-buttons-primary-text);
	--dimu-buttons-primary-border-hover: var(--dimu-buttons-primary-border);

	--dimu-buttons-secondary-bg: transparent;
	--dimu-buttons-secondary-text: #111;
	--dimu-buttons-secondary-border: #111;
	--dimu-buttons-secondary-bg-hover: var(--dimu-buttons-secondary-bg);
	--dimu-buttons-secondary-text-hover: var(--dimu-buttons-secondary-text);
	--dimu-buttons-secondary-border-hover: var(--dimu-buttons-secondary-border);

	display: flex;
	justify-content: var(--dimu-buttons-align);
}

.dimu-buttons__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dimu-buttons-gap);
}

/* Equal width. A grid whose container is sized to its content resolves every 1fr track
   to the widest item, which is the only way to match widths without measuring in script.
   min-content does the same against the narrowest, so long labels wrap instead. */
.dimu-buttons.is-equal-largest .dimu-buttons__list,
.dimu-buttons.is-equal-smallest .dimu-buttons__list {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	flex-wrap: nowrap;
}

.dimu-buttons.is-equal-largest .dimu-buttons__list {
	width: max-content;
}

.dimu-buttons.is-equal-smallest .dimu-buttons__list {
	width: min-content;
}

.dimu-buttons__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--dimu-buttons-pad-y) var(--dimu-buttons-pad-x);
	border-style: solid;
	border-width: var(--dimu-buttons-border-width);
	border-radius: var(--dimu-buttons-radius);
	font-size: var(--dimu-buttons-size);
	line-height: var(--dimu-buttons-line-height);
	letter-spacing: var(--dimu-buttons-tracking);
	text-transform: var(--dimu-buttons-transform);
	font-weight: var(--dimu-buttons-weight);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color .25s ease,
		border-color .25s ease,
		color .25s ease,
		border-radius .35s ease;
}

.dimu-buttons__btn:hover,
.dimu-buttons__btn:focus-visible {
	border-radius: var(--dimu-buttons-radius-hover);
	text-decoration: none;
}

.dimu-buttons__btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.dimu-buttons__btn--primary {
	background: var(--dimu-buttons-primary-bg);
	border-color: var(--dimu-buttons-primary-border);
	color: var(--dimu-buttons-primary-text);
}

.dimu-buttons__btn--primary:hover,
.dimu-buttons__btn--primary:focus-visible {
	background: var(--dimu-buttons-primary-bg-hover);
	border-color: var(--dimu-buttons-primary-border-hover);
	color: var(--dimu-buttons-primary-text-hover);
}

.dimu-buttons__btn--secondary {
	background: var(--dimu-buttons-secondary-bg);
	border-color: var(--dimu-buttons-secondary-border);
	color: var(--dimu-buttons-secondary-text);
}

.dimu-buttons__btn--secondary:hover,
.dimu-buttons__btn--secondary:focus-visible {
	background: var(--dimu-buttons-secondary-bg-hover);
	border-color: var(--dimu-buttons-secondary-border-hover);
	color: var(--dimu-buttons-secondary-text-hover);
}

/* A row of side by side buttons stops making sense on a phone */
@media (max-width: 600px) {
	.dimu-buttons.is-stack-mobile,
	.dimu-buttons.is-stack-mobile .dimu-buttons__list {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.dimu-buttons.is-stack-mobile .dimu-buttons__btn {
		width: 100%;
	}
}