/* ==========================================================================
   MMX / BUTTON
   ========================================================================== */

.mmx-button {
	padding: 0;
	border-radius: 4px;
	cursor: pointer;
	display: inline-block;
	text-align: center;
	font-family: var(--mmx-font-family-1);
	min-height: var(--mmx-min-target-size);
}

.mmx-button:disabled {
	cursor: not-allowed;
}

/* Link vs. Button Styles
   =========================================== */
.mmx-button__button {
	border-width: 1px;
	border-style: solid;
	text-decoration: none;
}

.mmx-button__button.mmx-button__width--full {
	display: block;
	width: 100%;
}

.mmx-button__link {
	background: none;
	border: 0;
	color: var(--mmx-color-primary-bg);
	display: inline-block;
	font-size: 13px;
	text-decoration-thickness: 1px;
	text-decoration: underline;
	text-underline-offset: 4px;
}

	.mmx-button__link:hover,
	:host(.hover) .mmx-button__link {
		text-decoration-thickness: 2px;
	}

	.mmx-button__link:focus,
	:host(.focus) .mmx-button__link {
		outline: 2px solid var(--mmx-color-focus);
	}


/* Theme: Light
   =========================================== */
.mmx-button__primary,
.mmx-button__secondary:hover,
:host(.hover) .mmx-button__secondary {
	background: var(--mmx-color-primary-bg);
	border-color: var(--mmx-color-primary-bg);
	color: var(--mmx-color-primary-text);
}

	.mmx-button__primary:hover,
	:host(.hover) .mmx-button__primary,
	.mmx-button__secondary {
		background: transparent;
		border-color: var(--mmx-color-primary-bg);
		color: var(--mmx-color-primary-bg);
	}

	.mmx-button__primary:disabled,
	:host(.disabled) .mmx-button__primary {
		background: #CCCCCC;
		border-color: #CCCCCC;
		color: var(--mmx-color-primary-disabled-text);
	}

	.mmx-button__secondary:disabled,
	:host(.disabled) .mmx-button__secondary {
		background: transparent;
		border-color: var(--mmx-color-secondary-disabled-border);
		color: var(--mmx-color-secondary-disabled-text);
	}

	.mmx-button__primary:focus,
	:host(.focus) .mmx-button__primary,
	.mmx-button__secondary:focus,
	:host(.focus) .mmx-button__secondary,
	.mmx-button__dark-primary:focus,
	:host(.focus) .mmx-button__dark-primary,
	.mmx-button__dark-secondary:focus,
	:host(.focus) .mmx-button__dark-secondary,
	.mmx-button__pill:focus,
	:host(.focus) .mmx-button__pill {
		outline: 2px solid var(--mmx-color-focus);
	}


/* Theme: Dark
   =========================================== */
.mmx-button__dark-primary,
.mmx-button__dark-secondary:hover,
:host(.hover) .mmx-button__dark-secondary {
	background: var(--mmx-color-primary-bg);
	border-color: var(--mmx-color-primary-bg);
	color: var(--mmx-color-primary-text);
}

	.mmx-button__dark-primary:hover,
	:host(.hover) .mmx-button__dark-primary,
	.mmx-button__dark-secondary {
		background: transparent;
		border-color: var(--mmx-color-primary-bg);
		color: var(--mmx-color-primary-bg);
	}

	.mmx-button__dark-primary:disabled,
	:host(.disabled) .mmx-button__dark-primary {
		background: #CCCCCC;
		border-color: #CCCCCC;
		color: var(--mmx-color-primary-bg);
	}

	.mmx-button__dark-secondary:disabled,
	:host(.disabled) .mmx-button__dark-secondary {
		background: transparent;
		border-color: var(--mmx-color-secondary-disabled-border);
		color: var(--mmx-color-secondary-disabled-text);
	}

/* Style: Pill
   =========================================== */
.mmx-button__pill {
	background: var(--mmx-color-pill-bg);
	border: none;
	border-radius: 1em;
	color: var(--mmx-color-pill-text);
	padding: 0.25em 1em;
	text-decoration: none;
	vertical-align: middle;
	transition: box-shadow .25s ease;
	margin: 0.3em 0.1em;
}

.mmx-button__pill:hover,
:host(.hover) .mmx-button__pill {
	background: color-mix(in srgb, var(--mmx-color-pill-bg), var(--mmx-color-white) 30%);
	box-shadow: 0 0.1em 0.3em rgba(0, 0, 0, 0.15);
}

.mmx-button__pill:disabled,
:host(.disabled) .mmx-button__pill {
	opacity: 0.5;
}

/* Style: Display Link
   =========================================== */
.mmx-button__display-link,
.mmx-button__dark-display-link {
	font-weight: bold;
	font-size: 14px;
	text-decoration-thickness: 2px;
}

	.mmx-button__display-link:hover,
	:host(.hover) .mmx-button__display-link,
	.mmx-button__dark-display-link:hover,
	:host(.hover) .mmx-button__dark-display-link {
		text-decoration-thickness: 3px;
	}


/* Style: Primary Link
   =========================================== */
.mmx-button__primary-link,
.mmx-button__dark-primary-link {
	font-size: 13px;
}


/* Style: Secondary Link
   =========================================== */
.mmx-button__secondary-link,
.mmx-button__dark-secondary-link {
	text-underline-offset: 2px;
}

.mmx-button__secondary-link {
	color: var(--mmx-color-secondary-link);
}

/* Sizes
   =========================================== */
.mmx-button__size--xs {
	font-size: 11px;
}

.mmx-button__button.mmx-button__size--xs {
	padding: 12px 14px;
}

.mmx-button__link.mmx-button__size--s {
	font-size: 12px;
}

.mmx-button__button.mmx-button__size--s {
	font-size: 13px;
	padding: 15px 20px;
}

.mmx-button__button,
.mmx-button__size--m {
	font-size: 13px;
}

.mmx-button__button,
.mmx-button__button.mmx-button__size--m {
	padding: 19px 32px;
}

.mmx-button__size--l {
	font-size: 16px;
}

.mmx-button__button.mmx-button__size--l {
	padding: 22px 38px;
}

/* Shape: Round
   =========================================== */
.mmx-button.mmx-button__shape--round {
	border-radius: 100%;
	height: 3em;
	line-height: 3em;
	padding: 0;
	text-align: center;
	text-decoration: none;
	vertical-align: middle;
	width: 3em;
}
	.mmx-button__link.mmx-button__shape--round:hover,
	:host(.hover) .mmx-button__link.mmx-button__shape--round{
		background: color-mix(in srgb, var(--mmx-color-primary-bg) 5%, var(--mmx-color-primary-text));
	}