.button {
	align-items: center;
	background-color: var(--color-button-default-background);
	border: 1px solid var(--color-button-default-border);
	border-radius: 17px;
	box-shadow: inset 1000px 400px 0 0 rgba(0, 0, 0, 0);
	color: var(--color-button-default-text);
	cursor: pointer;
	display: inline-flex;
	font-size: 14px;
	font-weight: var(--font-weight-bold);
	height: 34px;
	line-height: 20px; /* Match text positioning of non-module inline-block buttons */
	padding: 6px 17px;
	text-align: center;
	transition: all 0.25s ease-in;
	user-select: none;
	vertical-align: middle; /* Match baseline of non-module inline-block buttons */
	white-space: nowrap;

	@media (hover: hover) {
		&:hover {
			background-color: var(--color-button-default-hover-background);
			border-color: var(--color-button-default-hover-border);
			color: var(--color-button-default-text);
		}
	}

	&:active {
		background-color: var(--color-button-default-hover-background);
		border-color: var(--color-button-default-hover-border);
		box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
		color: var(--color-button-default-text);
		outline: 0;
	}

	&:focus {
		box-shadow: 0 0 8px rgba(131, 131, 131, 0.9);
		outline: none;
		outline-offset: 0;
	}

	&[disabled] {
		box-shadow: none;
		color: var(--color-ui-theme-text-disabled);
		pointer-events: none;
	}
}

.button.isPrimary {
	background-color: var(--color-button-primary-background);
	border-color: var(--color-button-primary-border);
	color: var(--color-button-primary-text);

	@media (hover: hover) {
		&:hover {
			box-shadow: inset 1000px 400px 0 0 rgba(0, 0, 0, 0.2); /* Dynamically darken - this is useful because primary buttons might be themed */
			color: var(--color-button-primary-text);
		}
	}

	&:focus {
		box-shadow:
			inset 1000px 400px 0 0 rgba(0, 0, 0, 0),
			0 0 8px rgba(131, 131, 131, 0.9);
	}

	&[disabled] {
		background-color: var(--color-gray-xx-light);
		border-color: var(--color-gray-xx-light);
		color: var(--color-ui-theme-text-disabled);
	}
}

.button.isTertiary {
	background-color: transparent;
	border-color: transparent;

	@media (hover: hover) {
		&:hover {
			background-color: var(--color-button-default-hover-background);
			border-color: var(--color-button-default-hover-border);
			color: var(--color-button-default-text);
		}
	}
}

.button.isLarge {
	border-radius: 24px;
	font-size: 18px;
	height: auto; /* Match the non-module large button height instead of using fixed height of flex button */
	line-height: 1.33;
	padding: 11px 24px 11px;
}

.button.isLogin {
	border-radius: 24px;
	font-size: 18px;
	height: auto; /* Match the non-module large button height instead of using fixed height of flex button */
	line-height: 1.33;
	padding: 11px 20% 11px;
}

.button.isSmall {
	border-radius: 16px;
	font-size: 13px;
	font-weight: var(--font-weight-regular);
	height: auto; /* Match the non-module large button height instead of using fixed height of flex button */
	line-height: 1;
	padding: 6px 12px;
}

.button.isRoundRect {
	background: #fff;
	border: none;
	border-radius: 6px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 30%);
	font-size: 13px;
	font-weight: var(--font-weight-regular);
	height: auto; /* Match the non-module large button height instead of using fixed height of flex button */
	line-height: 1;
	padding: 6px 12px;
	white-space: nowrap;

	/* We set an explicit background on this button so we need more specificity on the hover style: */
	@media (hover: hover) {
		&:hover {
			background-color: var(--color-button-default-hover-background);
			border-color: var(--color-button-default-hover-border);
			color: var(--color-button-default-text);
		}
	}

	:global(.far),
	:global(.fal),
	:global(.fas) {
		margin-right: 4px;
	}
}

.buttonGroup {
	/* Font-size override to suppress whitespace in output */
	font-size: 0;

	/* Interior rounded edges and margins are removed & borders are added: */
	& .button:not(:first-child) {
		border-bottom-left-radius: 0;
		border-left: none;
		border-top-left-radius: 0;
		margin-left: 0;
	}

	& .button:not(:last-child) {
		border-bottom-right-radius: 0;

		/**
		 * All buttons except the last one get a right-border.
		 * The primary-background color looks good and ensures a primary button in
		 * the group doesn't have a clashing gray border against it.
		 */
		border-right: 1px solid var(--color-button-default-border);
		border-top-right-radius: 0;
		margin-right: 0;
	}

	/* "Selected" buttons can be used to indicate state. */
	& .button.isSelected {
		background-color: var(--color-gray-xx-light);
		color: var(--color-gray-x-dark);
	}
}

.formBottomButtonGroup {
	align-items: center;
	border-top: 1px solid var(--color-gray-xx-light);
	display: flex;
	justify-content: flex-end;
	margin-top: 50px;
	padding-top: 10px;

	& .button {
		margin-left: 5px;
	}

	/* The default is too tight between the leftmost button and text hints or links. */
	& .button:first-of-type {
		margin-left: 10px;
	}
}

/**
 * Work around ng-show waiting the transition duration before hiding.
 * https://github.com/angular/angular.js/issues/8224
 * Apply the .ng-animate-opt-in class to get the old behavior back.
 */
.button:global(.ng-animate):not(:global(.ng-animate-opt-in)) {
	transition-duration: 0s;
}