button,
.button,
::-webkit-file-upload-button {
	--button-font-size: var(--font-size-default);
	--button-font-units: 16;
	--button-padding-inline-multiplier: 2.5;
	--button-padding-block-multiplier: 1;
	--button-color-font: var(--color-greyscale-text);
	--button-color-background: var(--color-black-950);
	--button-color-hover-background: var(--color-brown-600);
	--button-padding-inline: calc((var(--button-font-size) * var(--button-padding-inline-multiplier)) - (var(--button-font-size) / var(--button-font-units)));
	--button-padding-block: calc((var(--button-font-size) * var(--button-padding-block-multiplier)) - (var(--button-font-size) / var(--button-font-units)));
	--button-icon-label-gap: var(--button-font-size);
	--button-color-border: hsla(0, 0%, 0%, 0);
	--button-border-radius: 10rem;

	display: inline-block;
	font-size: var(--button-font-size);
	font-weight: 400;
	font-family: inherit;
	line-height: 1.25rem;
	text-align: center;
	border-width: 1px;
	border-style: solid;
	border-color: var(--button-color-border);
	border-radius: var(--button-border-radius);
	padding-inline: var(--button-padding-inline);
	padding-block: var(--button-padding-block);
	color: var(--button-color-font);
	background-color: var(--button-color-background);
	box-shadow: 0 0 4px 0 var(--color-transparent);
	cursor: pointer;
	transition-duration: var(--speed-blink);
	transition-property: background-color, border-color, box-shadow;
	transition-timing-function: linear;
	text-decoration: none;
}

@media (max-width: 640px) {

	:is(button,
		.button):not([data-mode="icon"]):only-child {
		display: inline-flex;
		box-sizing: border-box;
	}
}

:is(button,
	.button):hover {
	background-color: var(--button-color-hover-background);
	box-shadow:
		0 2px 4px 0 hsla(23, 5%, 34%, 0.12),
		0px 28px 48px -8px hsla(23, 5%, 34%, 0.12);
}

:is(button,
	.button):focus-visible {
	box-shadow:
		0 2px 4px 0 hsla(23, 5%, 34%, 0.12),
		0px 56px 112px -20px hsla(23, 5%, 34%, 0.12);
	outline-offset: 0.25rem;
	outline-width: 0.5rem;
}

/* Schemes */
/* button[data-scheme="primary"] is the default button */
:is(button,
	.button)[data-scheme="secondary"],
::-webkit-file-upload-button {
	--button-color-font: var(--color-text-title);
	--button-color-background: var(--color-transparent);
	--button-color-hover-background: var(--color-surface-subtitle);
	--button-color-border: var(--color-border-default);
}

/* Dark background theme adjustments */
.container:is([data-theme="rich"],
	[data-theme="emphasis"]) :is(button,
	.button):not([data-scheme="secondary"]) {
	--button-color-font: var(--color-surface-darker);
	--button-color-background: var(--color-brown-100);
	--button-color-hover-background: var(--color-surface-subtitle);
}

.container:is([data-theme="rich"],
	[data-theme="emphasis"]) :is(button,
	.button)[data-scheme="secondary"] {
	--button-color-font: var(--color-surface-subtitle);
	--button-color-hover-background: var(--color-black-950);
	--button-color-border: var(--color-brown-100);
}

.container[data-theme="alternate"] :is(button, .button)[data-scheme="secondary"] {
	--button-color-background: var(--color-white);
	--button-color-hover-background: var(--color-brown-100);
}

/* Remove the scheme-based theming from a button */
:is(button,
	.button)[data-scheme="stripped"] {
	--button-color-font: inherit;
	--button-color-background: inherit;
	--button-color-hover-background: inherit;
	box-shadow: none !important;
}

/* Size adjustments */
:is(button,
	.button)[data-size="small"],
::-webkit-file-upload-button {
	--button-font-size: 0.875rem;
	--button-font-units: 14;
	--button-padding-block-multiplier: 0.85714;
	--button-padding-inline-multiplier: 1.42857;
}

/* Icon shared settings */
:is(button,
	.button)[data-mode="icon"]::after,
:is(button,
	.button)[data-mode="icon-before"]::before,
:is(button,
	.button)[data-mode="icon-after"]::after {
	content: '';
	display: block;
	block-size: 1em;
	inline-size: 1em;
	background-size: contain;
	background-position: 50% 50%;
	background-image: var(--icon-image-url);
	background-repeat: no-repeat;
	flex-shrink: 0;
}

/* Icon and label */
:is(button,
	.button)[data-mode^="icon-"] {
	display: inline-flex;
	flex-direction: row;
	gap: var(--button-icon-label-gap);
	align-items: center;
}

@media (max-width: 640px) {

	:is(button,
		.button)[data-mode^="icon-"]:only-child {
		display: inline-flex;
		justify-content: center;
	}
}

/* Icon only */
:is(button,
	.button)[data-mode="icon"] {
	--button-padding-inline-multiplier: 0.75;
	--button-padding-block-multiplier: 0.75;

	text-indent: -999rem;
	overflow: hidden;
	white-space: nowrap;
	position: relative;
	min-inline-size: var(--button-font-size);
	min-block-size: var(--button-font-size);
	box-sizing: content-box;
	line-height: 1;
}

:is(button,
	.button)[data-mode="icon"][data-size="small"] {
	--button-padding-block-multiplier: 0.57142;
	--button-padding-inline-multiplier: 0.57142;
}

:is(button,
	.button)[data-mode="icon"]::after {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	transform: translate(-50%, -50%);
}