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

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

.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: 3px;
}

	.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 {
		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: 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: 0;
}

.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;
}