.button {
	--button-pad-block: 0.625rem;
	--button-pad-inline: 1.5rem;
	--button-icon-size: 2.125rem;
	--button-min-size: 3.375rem;
	--button-font-size: 1rem;
	--button-icon-gap: 1rem;
	--button-arrow-scale: 1.0625;
	--button-fill: var(--color-red);
	--button-ink: var(--color-white);
	--button-icon-fill: var(--color-white);
	--button-icon-ink: var(--color-red);

	align-items: center;
	background: var(--button-fill);
	border: 0;
	border-radius: var(--radius-pill);
	color: var(--button-ink);
	display: inline-flex;
	font-family: var(--font-family-body);
	font-size: var(--button-font-size);
	font-weight: 600;
	gap: var(--button-icon-gap);
	justify-content: center;
	letter-spacing: 0;
	line-height: 1;
	min-block-size: var(--button-min-size);
	padding-block: var(--button-pad-block);
	padding-inline: var(--button-pad-inline);
	text-decoration: none;
}

.button:has(.button__icon) {
	padding-inline-end: var(--button-pad-block);
}

.button__label {
	display: inline-block;
	white-space: nowrap;
}

.button__icon {
	align-items: center;
	background: var(--button-icon-fill);
	border-radius: var(--radius-pill);
	block-size: var(--button-icon-size);
	color: var(--button-icon-ink);
	display: inline-flex;
	flex: 0 0 auto;
	inline-size: var(--button-icon-size);
	justify-content: center;
	line-height: 0;
}

.button__icon svg {
	display: block;
	flex: 0 0 auto;
	max-inline-size: none;
}

.button[data-button-icon="arrow-right"] .button__icon svg {
	transform: scale(var(--button-arrow-scale));
}

.button:not([data-button-icon="arrow-right"]) .button__icon svg {
	block-size: 0.875rem;
	inline-size: 0.875rem;
}

.button[data-button-color="red"] {
	--button-fill: var(--color-red);
	--button-ink: var(--color-white);
	--button-icon-fill: var(--color-white);
	--button-icon-ink: var(--color-red);
}

.button[data-button-color="dark"] {
	--button-fill: var(--color-dark);
	--button-ink: var(--color-white);
	--button-icon-fill: var(--color-white);
	--button-icon-ink: var(--color-dark);
}

.button[data-button-color="white"] {
	--button-fill: var(--color-white);
	--button-ink: var(--color-dark);
	--button-icon-fill: var(--color-dark);
	--button-icon-ink: var(--color-white);
}

.button[data-button-size="small"] {
	--button-arrow-scale: 1;
}

.button[data-button-size="medium"] {
	--button-arrow-scale: 1.0625;
}

.button[data-button-size="large"] {
	--button-arrow-scale: 1.125;
}

.button[data-button-size="xl"] {
	--button-arrow-scale: 1.25;
}

.button-group {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
}