.Button {
	--bgColor: transparent;
	--fgColor: var(--color-base);
	--borderColor: var(--color-base);
	--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);

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

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

	--borderBottomLightnessMultiplier: 0.9;

    &.small {
        --buttonHeight: var(--button-height-small);
        --fontSize: var(--button-font-size-small);
        --fontWeight: var(--button-font-weight-small);

        > .Icon {
            --size: var(--button-icon-size-small);
        }

        padding: 0 calc(var(--buttonHeight) / 7);
    }

	position: relative;
	display: inline-flex !important;
	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(--fontSize) !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 {
    opacity: .3;
    pointer-events: none;
}

.Button.faint {
	--borderColor: var(--color-base-faintest-2);
	--fgColor: var(--color-base-faint);
}

.Button.selected {
	--borderColor: var(--color-primary);
	--fgColor: var(--color-primary);
}

.Button.loading {
    pointer-events: none;

    & > .Icon > div {
        mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCIgc3R5bGU9InNoYXBlLXJlbmRlcmluZzogYXV0bzsgZGlzcGxheTogYmxvY2s7IGJhY2tncm91bmQ6IHRyYW5zcGFyZW50OyIgd2lkdGg9IjE4NiIgaGVpZ2h0PSIxODYiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48Zz48Y2lyY2xlIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgZmlsbD0ibm9uZSIgc3Ryb2tlLWRhc2hhcnJheT0iNDMuOTgyMjk3MTUwMjU3MTA0IDQzLjk4MjI5NzE1MDI1NzEwNCIgc3Ryb2tlPSIjYmNjN2VjIiBzdHJva2Utd2lkdGg9IjQiIHI9IjI4IiBjeT0iNTAiIGN4PSI1MCI+CiAgPGFuaW1hdGVUcmFuc2Zvcm0gdmFsdWVzPSIwIDUwIDUwOzM2MCA1MCA1MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIHR5cGU9InJvdGF0ZSIgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIj48L2FuaW1hdGVUcmFuc2Zvcm0+CjwvY2lyY2xlPjxnPjwvZz48L2c+PCEtLSBbbGRpb10gZ2VuZXJhdGVkIGJ5IGh0dHBzOi8vbG9hZGluZy5pbyAtLT48L3N2Zz4=") !important;
        mask-size: 140%;
        mask-position: center;
    }
}