.Button {
	--bgColor: #fff;
	--fgColor: currentColor;
	--borderColor: currentColor;
	--hoverShadowColor: var(--borderColor);
	--hoverShadowTransparency: .3;

	--hoverBgColor: #fff;
	--hoverFgColor: var(--color-base);
	--hoverBorderColor: hsl(from var(--hoverFgColor) h s calc(l * 1.4));

	--activeColor: var(--color-primary);

	--buttonHeight: var(--button-height);

	--fontWeight: var(--button-font-weight);

	--transitionInTime: 0.02s;
	--transitionOutTime: 0.15s;

	--borderBottomLightnessMultiplier: 0.9;

	position: relative;
	display: inline-flex;
	gap: .4rem;
	align-items: center;
	vertical-align: top;
	margin: 0px;


	padding: 0 calc(var(--buttonHeight) / 4);

    width: max-content;
	max-width: 100%;
	height: var(--buttonHeight);
	line-height: 1.5em !important;

	color: var(--fgColor) !important;

	font-family: var(--button-font-family) !important;
	letter-spacing: normal !important;
	font-style: normal !important;
	font-size: var(--button-font-size) !important;
	font-weight: var(--fontWeight) !important;
	-webkit-font-smoothing: auto !important;
	text-shadow: none !important;

	text-decoration: none !important;
	text-align: left;

	white-space: nowrap;

	cursor: pointer;

	background: var(--bgColor);
	border: solid var(--borderColor) 1px;
	border-bottom-color: hsl(from var(--borderColor) h s calc(l * var(--borderBottomLightnessMultiplier)));

	transition:
		border var(--transitionOutTime) ease-out,
		color var(--transitionOutTime) ease-out,
		box-shadow var(--transitionOutTime) ease-out,
		background-color var(--transitionOutTime) ease-out;

	border-radius: var(--button-border-radius);

    user-select: none;
}

.Button:has(.Icon):has(.title) {
	padding: 0 calc(var(--buttonHeight) / 3.2) 0 calc(var(--buttonHeight) / 4);

	&.big {
		padding: 0 calc(var(--buttonHeight) / 3) 0 calc(var(--buttonHeight) / 3);
	}
}

.Button:hover,
a.Button:hover {
	transition:
		border var(--transitionInTime) ease-out,
		color var(--transitionInTime) ease-out,
		box-shadow var(--transitionInTime) ease-out,
		background-color var(--transitionInTime) ease-out;

	color: var(--hoverFgColor) !important;
	background-color: var(--hoverBgColor) !important;
	border-color: var(--hoverBorderColor) !important;
	border-bottom-color: var(--hoverBorderColor) !important;

	box-shadow: 0 3px 4px -3px hsl(from var(--hoverShadowColor) h s 50 / var(--hoverShadowTransparency)) !important;

	opacity: 1 !important;
}

a.Button:active {
	--hoverFgColor: var(--activeColor);
	--hoverBorderColor: var(--activeColor);

	transition:
		border var(--transitionInTime) ease-out,
		color var(--transitionInTime) ease-out,
		box-shadow var(--transitionInTime) ease-out,
		background-color var(--transitionInTime) ease-out;
}

.Button:is(
	.accent,
	.primary,
    .inverse
) {
	--hoverBgColorLightnessMultiplier: 1.07;
	--activeBgColorLightnessMultiplier: 1.13;

	--hoverBgColor: hsl(from var(--bgColor) h s calc(l * var(--hoverBgColorLightnessMultiplier)));
	--fgColor: #fff !important;
	--hoverFgColor: var(--fgColor) !important;

	--borderColor: hsl(from var(--bgColor) h s calc(l * 0.97));
	--hoverBorderColor: hsl(from var(--borderColor) h s calc(l * var(--hoverBgColorLightnessMultiplier)));

	--hoverShadowColor: var(--bgColor);
	--hoverShadowTransparency: .7;

	--activeColor: var(--bgColor);

	> .secondary {
		--fgColor: var(--bgColor);
	}

	> .secondary:after {
		display: none;
	}

	&:active {
		--hoverBgColor: hsl(from var(--bgColor) h s calc(l * var(--activeBgColorLightnessMultiplier)));
	}
}

.Button.inverse {
    --bgColor: transparent;
    --fgColor: #fff !important;
    --borderColor: #fff;
    --activeColor: #fff;
}

.Button.primary {
	--bgColor: var(--color-primary);
}

.Button.accent {
	--bgColor: var(--color-accent);
}

.Button.centered {
    margin-left: auto;
    margin-right: auto;
}

.Button.disabled {
    --bgColor: var(--color-base-fainter);
    pointer-events: none;
}