button,
input[type='button'],
input[type='reset'],
input[type='submit'],
.button {
	@include NormalTransition();
	padding: 0 35px;
	height: 45px;
	line-height: 43px;
	outline: none;
	color: $button-text;
	border: 1px solid $button-border;
	background-color: $button-background;
	border-radius: $button-rounded;
	font-family: $button-font-family;
	font-size: $button-font-size;
	font-weight: $button-font-weight;
	letter-spacing: $button-letter-spacing;
	text-transform: $button-text-transform;
	cursor: pointer;
	text-align: center;
	user-select: none;
	box-shadow: none;

	&:focus {
		outline: none;
	}

	&[disabled],
	&.disabled {
		cursor: not-allowed;
		background-color: $button-background !important;
		border-color: $button-border !important;
		color: $button-text !important;
		box-shadow: none !important;
		opacity: .8;
	}

	&:hover {
		color: $button-hover-text;
		border-color: $button-hover-border;
		background-color: $button-hover-background;
		box-shadow: 0 0 0 0.2rem $button-hover-background;
	}
}

.button-2 {
	--minimog-color-button-text: #{$button2-text};
	--minimog-color-button-border: #{$button2-border};
	--minimog-color-button-background: #{$button2-background};
	--minimog-color-button-hover-text: #{$button2-hover-text};
	--minimog-color-button-hover-border: #{$button2-hover-border};
	--minimog-color-button-hover-background: #{$button2-hover-background};
}

.button {
	display: inline-block;
}

.updating-icon {
	position: relative;
	// Avoid multi click.
	pointer-events: none;

	&:before {
		@extend %FontAwesomeRegular;
		content: $fa-spinner-third !important;
		animation: rotating-center 1s linear infinite !important;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		font-size: 16px;
		text-indent: 0;
	}

	span {
		opacity: 0;
	}
}
