
.uploadButton,
input[type="submit"],
button {
	// Normal buttons
	color: @btnColorDefaultText;
	background-color: @btnColorDefault;
	font-weight: 400;
	text-transform: uppercase;
	padding: .5rem 1rem;
	cursor: pointer;
	outline: none;
	border: none;
	display: inline-block;
	margin-bottom: .5rem;
	border-radius: @radius;
	text-decoration: none;
	-webkit-appearance: none;
	.user-select();
	.transition();

	&.full-width {
		width: 100%;
	}

	&:hover {
		text-decoration: none;
		background-color: lighten(@btnColorDefault, @btnHoverLighten);
		.z-depth2();
	}

	&.disabled,
	&:disabled {
		.z-depth0();
		cursor: default;
		opacity: @btnDisabled;
	}
}

.makeButtonStyles(@styleEnabled, @btnPrefix, @btnOutline, @btnOutlinePrefix) when (@styleEnabled = true) {
	.uploadButton,
	input[type="submit"],
	button {
		&@{btnPrefix}primary {
			color: @colorPrimaryText;
			background-color: @colorPrimary;

			&:hover {
				background-color: lighten(@colorPrimary, @btnHoverLighten);
			}

			&.disabled,
			&:disabled {
				background-color: @colorPrimary;
			}
		}

		&@{btnPrefix}accent {
			color: @colorAccentText;
			background-color: @colorAccent;

			&:hover {
				background-color: lighten(@colorAccent, @btnHoverLighten);
			}

			&.disabled,
			&:disabled {
				background-color: @colorAccent;
			}
		}

		&@{btnPrefix}alert,
		&@{btnPrefix}danger {
			color: @btnColorDangerText;
			background-color: @btnColorDanger;

			&:hover {
				background-color: lighten(@btnColorDanger, @btnHoverLighten);
			}

			&.disabled,
			&:disabled {
				background-color: @btnColorDanger;
			}
		}

		.extraButtons(@allButtons) when (@allButtons = true) {

			&@{btnPrefix}secondary {
				color: @btnColorSecondaryFg;
				background-color: @btnColorSecondaryBg;

				&:hover {
					background-color: lighten(@btnColorSecondaryBg, @btnHoverLighten);
				}

				&.disabled,
				&:disabled {
					background-color: @btnColorSecondaryBg;
				}
			}

			&@{btnPrefix}success {
				color: @alertColorSuccessFg;
				background-color: @alertColorSuccessBg;

				&:hover {
					background-color: lighten(@alertColorSuccessBg, @btnHoverLighten);
				}

				&.disabled,
				&:disabled {
					background-color: @alertColorSuccessBg;
				}
			}

			&@{btnPrefix}warning {
				color: @alertColorWarningFg;
				background-color: @alertColorWarningBg;

				&:hover {
					background-color: lighten(@alertColorWarningBg, @btnHoverLighten);
				}

				&.disabled,
				&:disabled {
					background-color: @alertColorWarningBg;
				}
			}

			&@{btnPrefix}info {
				color: @alertColorInfoFg;
				background-color: @alertColorInfoBg;

				&:hover {
					background-color: lighten(@alertColorInfoBg, @btnHoverLighten);
				}

				&.disabled,
				&:disabled {
					background-color: @alertColorInfoBg;
				}
			}
		}
		.extraButtons(@btnAdditional);

		// Flat buttons
		&@{btnOutline},
		&.flat {
			color: @btnColorDefaultText;
			background-color: transparent;

			&:hover {
				background-color: @btnColorFlatBg;
				.z-depth0();
			}

			&.disabled,
			&:disabled {
				background-color: transparent;
			}

			&.primary {
				color: @colorPrimary;
			}

			&.accent {
				color: @colorAccent;
			}

			&.alert,
			&.danger {
				color: @btnColorDanger;
			}

			.extraButtons(@allButtons) when (@allButtons = true) {
				&.secondary {
					color: @btnColorSecondaryBg;
				}
				&.success {
					color: @alertColorSuccessBg;
				}
				&.warning {
					color: @alertColorWarningBg;
				}
				&.info {
					color: @alertColorInfoBg;
				}
			}
			.extraButtons(@btnAdditional);
		}

		// Outline buttons
		&@{btnOutline} {
			border: 1px solid @btnColorDefaultText;

			&:hover {
				color: @white;
				background-color: @btnColorDefaultText;
			}

			&@{btnOutlinePrefix}primary {
				border-color: @colorPrimary;

				&:hover {
					background-color: @colorPrimary;
				}
			}

			&@{btnOutlinePrefix}accent {
				border-color: @colorAccent;

				&:hover {
					background-color: @colorAccent;
				}
			}

			&@{btnOutlinePrefix}alert, &@{btnOutlinePrefix}danger {
				border-color: @btnColorDanger;

				&:hover {
					background-color: @btnColorDanger;
				}
			}

			.extraButtons(@allButtons) when (@allButtons = true) {

				&@{btnOutlinePrefix}secondary {
					border-color: @btnColorSecondaryBg;

					&:hover {
						background-color: @btnColorSecondaryBg;
					}
				}
				&@{btnOutlinePrefix}success {
					border-color: @alertColorSuccessBg;

					&:hover {
						background-color: @alertColorSuccessBg;
					}
				}
				&@{btnOutlinePrefix}warning {
					border-color: @alertColorWarningBg;

					&:hover {
						background-color: @alertColorWarningBg;
					}
				}
				&@{btnOutlinePrefix}info {
					border-color: @alertColorInfoBg;

					&:hover {
						background-color: @alertColorInfoBg;
					}
				}
			}
			.extraButtons(@btnAdditional);
		}
	}
}

// Make fusionCSS style buttons
.makeButtonStyles(@fusionCSSBtnStyle, ~'.', ~'.outline', ~'.');

// Make Bootstrap 3 style buttons
.makeButtonStyles(@bootstrap3BtnStyle, ~'.btn-', ~'.btn-outline', ~'-');

.uploadButton,
input[type="submit"],
button {
	// Raised buttons
	&.raised {
		.z-depth1();
		&:hover {
			.z-depth2();
		}
		&.disabled,
		&:disabled {
			.z-depth0();
		}
	}

	// Floating
	&.floating {
		display: inline-block;
		border-radius: 50%;
		width: 3.5rem;
		height: 3.5rem;
		font-size: 1.6rem;
		line-height: 3.5rem;
		text-align: center;
		padding: 0;
		.z-depth2();

		i {
			line-height: 3.5rem;
		}

		&.mini {
			font-size: 1rem;
			width: 2.5rem;
			height: 2.5rem;
			line-height: 2.5rem;

			i {
				line-height: 2.5rem;
			}
		}
	}
}

// Extend the button with fusionCSS button names
.extendButtons(@styleEnable, @btnName) when (@styleEnable = true) {
	@{btnName} {
		&:extend(button all);
	}
}

// Build fusionCSS button styles
.extendButtons(@fusionCSSBtnStyle, ~'.button');

// Build Bootstrap 3 button styles
.extendButtons(@bootstrap3BtnStyle, ~'.btn');

.uploadButton {
	position: relative;
	overflow: hidden;
	display: inline-block;

	input[type="file"] {
		position: absolute;
		top: 0;
		right: 0;
		margin: 0;
		padding: 0;
		font-size: 40px;
		cursor: pointer;
		opacity: 0;
	}
}