:root {
	--ml-button-text-color: var(--ml-primary-color);
	--ml-button-highlight-background-color: var(--ml-primary-color);
	--ml-button-highlight-text-color: var(--ml-mood);
	--ml-button-padding: var(--scale8-2) var(--scale8-2);
}

button {
	background-color: transparent;
	color: inherit; /* This prevents applied system colors such as '-apple-system-blue' */
	padding: 0;
	border: none;
	cursor: pointer;
	box-sizing: border-box;
	font-family: var(--header-font-family);
	font-size: var(--rem-l);
	width: fit-content;
}

.ml-button {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: row;
	padding: var(--ml-button-padding);
	height: auto;
	min-height: 33px;
	width: fit-content;
	user-select: none;
	font-family: var(--text-font-family);
	font-size: var(--rem-s);
	font-weight: normal;
	border-style: solid;
	border-width: 1px;
	border-radius: 12px;
	border-color: var(--ml-border-color);
	background-color: var(--ml-background-color);
}

.ml-button i,
.ml-button > * {
	display: flex;
	align-self: center;
}

.ml-button > * {
	margin-right: 8px;
}

.ml-button > *:last-child {
	margin-right: 0;
}

.ml-button > ml-spinner[center] {
	margin-left: auto;
	margin-right: auto;
}

.ml-button.no-padding {
	padding: 0;
}

.ml-button.center {
	margin: 0 auto;
	text-align: center;
}

.ml-button:active {
	scale: 0.98;
}

/* Tabs */

.ml-button-tab-row {
	display: flex;
	flex-direction: row;
	height: 48px;
	max-height: 48px;
	min-height: 48px;
	overflow-x: auto;
	padding-bottom: 5px; /* Space for box-shadow */
}

.ml-button-tab-row > .ml-button {
	margin-right: var(--gutter-margin-xs);
}

.ml-button-tab-row > .ml-button:last-child {
	margin-right: 0;
}

.ml-button-tab-row > .ml-button,
.ml-button-tab-row > .ml-button.inactive {
	font-size: 16px;
	border-radius: 5px;
	border-color: var(--ml-border-highlight-color);
	color: var(--ml-text-color);
	font-family: var(--header-font-family);
	font-weight: bold;
}

.ml-button-tab-row > .ml-button.active,
.ml-button-tab-row > .ml-button:hover,
.ml-button-tab-row > .ml-button.inactive:hover {
	border-color: var(--ml-primary-color);
	color: var(--ml-primary-color);
	background-color: var(--ml-background-view);
	box-shadow: 3px 3px 6px -2px #00000029;
}


/*
*	Size
************/

.ml-button.size-lg {
	width: 110px;
	height: 60px;
	padding: var(--scale8-2) var(--scale8-4);
}

.ml-button.size-lg > ml-icon:only-child {
	width: 35px;
}

.ml-button.size-lg > .material-icons:only-child {
	font-size: 35px;
}

.ml-button.size-xl {
	width: 250px;
	height: 75px;
	padding: var(--scale8-2) var(--scale8-4);
	font-size: 110%;
}

.ml-button.size-xl > ml-icon:only-child {
	width: 40px;
}

.ml-button.size-xl > .material-icons:only-child {
	font-size: 40px;
}

.ml-button.size-md {
	width: 80px;
	height: 50px;
}

.ml-button.size-md > ml-icon:only-child {
	width: var(--ml-icon-width-default);
}

.ml-button.size-md > .material-icons:only-child {
	font-size: 30px;
}

.ml-button.size-sm {
	min-width: 60px;
	height: 40px;
	padding: var(--scale8-1) var(--scale8-1);
	font-size: var(--rem-s);
}

.ml-button.size-sm > ml-icon:only-child {
	width: var(--ml-icon-width-default);
}

.ml-button.size-sm > .material-icons:only-child {
	font-size: 28px;
}

.ml-button.size-xs {
	width: 30px;
	height: 30px;
	min-height: 30px;
	max-height: 30px;
	padding: 5px;
	border-radius: 5px;
	font-size: var(--rem-s);
}

.ml-button.size-xs > ml-icon {
	width: 18px;
}

@media all and (max-width: 599px) {
	.ml-button.layout-xs-size-default {
		height: 40px;
		min-height: 40px;
		padding: var(--ml-button-padding);
	}

	.ml-button.layout-xs-size-md {
		width: 80px;
		height: 50px;
	}

	.ml-button.layout-xs-size-md > ml-icon:only-child {
		width: var(--ml-icon-width-default);
	}
	
	.ml-button.layout-xs-size-md > .material-icons:only-child {
		font-size: 30px;
	}

	.ml-button.layout-xs-size-xs {
		width: 30px;
		height: 30px;
		min-height: 30px;
		max-height: 30px;
		padding: 5px;
		border-radius: 5px;
		font-size: var(--rem-s);
	}
	
	.ml-button.layout-xs-size-xs > ml-icon {
		width: 18px;
	}
}

/*
*	Colors
************/

.ml-button,
.ml-button > ml-icon,
.ml-button > .material-icons {
	color: var(--ml-button-text-color);
}

.ml-button:hover,
.ml-button.active {
	background-color: var(--ml-button-highlight-background-color);
}

.ml-button:hover,
.ml-button.active,
.ml-button:hover > ml-icon,
.ml-button.active > ml-icon,
.ml-button:hover > .material-icons,
.ml-button.active > .material-icons {
	color: var(--ml-button-highlight-text-color);
}

.ml-button.disabled,
button.ml-button[disabled],
button.ml-button:disabled {
	cursor: not-allowed;
	background-color: var(--ml-disabled-color) !important; /* !important to override any hover events */
}

.ml-button.disabled,
button.ml-button[disabled],
button.ml-button:disabled,
.ml-button.disabled > ml-icon,
button.ml-button[disabled] > ml-icon,
button.ml-button:disabled > ml-icon,
.ml-button.disabled > .material-icons,
button.ml-button[disabled] > .material-icons,
button.ml-button:disabled > .material-icons {
	color: var(--ml-disabled-text-color) !important; /* !important to override any hover events */
}

/* style-link */

.ml-button.style-link {
	border: none;
	background-color: transparent; /* !important to override any hover events */
}

button.ml-button.style-link[disabled],
button.ml-button.style-link:disabled {
	background-color: transparent; /* !important to override any hover events */
}

.ml-button.style-link:hover,
.ml-button.style-link:hover > ml-icon,
.ml-button.style-link:hover > .material-icons {
	color: var(--ml-link-highlight-color);
}

.ml-button.style-link.inactive,
.ml-button.style-link.inactive > ml-icon,
.ml-button.style-link.inactive > .material-icons {
	color: var(--ml-secondary-text-color);
	opacity: 0.8;
}

.ml-button.style-link.inactive:hover,
.ml-button.style-link.inactive:hover > ml-icon,
.ml-button.style-link.inactive:hover > .material-icons {
	color: var(--ml-button-text-color);
}

.ml-button.style-link.active,
.ml-button.style-link.active > ml-icon,
.ml-button.style-link.active > .material-icons {
	color: var(--ml-button-text-color);
}

/* style-cta */

.ml-button.style-cta {
	background-color: var(--ml-button-highlight-background-color);
	border-radius: 5px;
}

.ml-button.style-cta:hover {
	filter: brightness(120%);
}

.ml-button.style-cta,
.ml-button.style-cta > ml-icon,
.ml-button.style-cta > .material-icons {
	color: var(--ml-button-highlight-text-color);
}

/* style-cta-alt */

.ml-button.style-cta-alt {
	background-color: var(--ml-success-color);
	border-radius: 5px;
}

.ml-button.style-cta-alt:hover {
	filter: brightness(120%);
}

.ml-button.style-cta-alt,
.ml-button.style-cta-alt > ml-icon,
.ml-button.style-cta-alt > .material-icons {
	color: #fff;
}

/* style-cta-hollow */

.ml-button.style-cta-hollow {
	background-color: transparent;
	color: var(--ml-primary-color);
	border-color: var(--ml-primary-color);
	border-radius: 5px;
}

.ml-button.style-cta-hollow:hover {
	border-color: var(--ml-border-outline-color);
	color: var(--ml-link-highlight-color);
}

.ml-button.style-cta-hollow,
.ml-button.style-cta-hollow > ml-icon,
.ml-button.style-cta-hollow > .material-icons {
	color: var(--ml-primary-color);
}

/* style-icon */

.ml-button.style-icon {
	background-color: transparent;
	border-radius: 50%;
	border: none;
	padding: 0;
	width: 26px;
	height: 26px;
}

.ml-button.style-icon > ml-icon,
.ml-button.style-icon > .material-icons {
	width: 100%;
	height: 100%;
	color: var(--ml-primary-color);
}

.ml-button.style-icon:hover,
.ml-button.style-icon:hover > ml-icon,
.ml-button.style-icon:hover > .material-icons {
	filter: brightness(0.9);
}

.ml-button.style-icon.inactive,
.ml-button.style-icon.inactive > ml-icon,
.ml-button.style-icon.inactive > .material-icons {
	color: var(--ml-text-lowlight-color);
}

.ml-button.style-icon.inactive:hover,
.ml-button.style-icon.inactive:hover > ml-icon,
.ml-button.style-icon.inactive:hover > .material-icons {
	color: var(--ml-primary-color);
}

.ml-button.style-icon.active,
.ml-button.style-icon.active > ml-icon,
.ml-button.style-icon.active > .material-icons {
	color: var(--ml-primary-color);
}

.ml-button.style-icon.active:hover,
.ml-button.style-icon.active:hover > ml-icon,
.ml-button.style-icon.active:hover > .material-icons {
	filter: none;
}

/* style-subtle */

.ml-button.style-subtle {
	background-color: #fbfcff;
	border-color: #d9dfeb;
	border-radius: 3px;
	font-weight: 100;
	font-size: 85%;
	font-family: var(--text-font-family);
}

.ml-button.style-subtle:hover {
	background-color: #eeeff1;
	border-color: #c4cad5;
}

.ml-button.style-subtle,
.ml-button.style-subtle > ml-icon,
.ml-button.style-subtle > .material-icons {
	color: var(--ml-button-text-color);
}

/* style-underline */

.ml-button.style-underline {
	text-decoration: underline;
}

.ml-button.style-hard-shadow {
	filter: drop-shadow(5px 5px 0px var(--ml-silk));
}