.button {
	cursor: pointer;
	display: inline-block;
	font-weight: 400;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	user-select: none;
	border: 1px solid transparent;
	padding: 0.375rem 0.75rem;
	font-size: 1rem;
	line-height: 1.5;
	border-radius: 0.25rem;
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
		border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	transition-property: color, background-color, border-color, box-shadow;
	transition-duration: 0.15s, 0.15s, 0.15s, 0.15s;
	transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
	transition-delay: 0s, 0s, 0s, 0s;
	transition-behavior: normal, normal, normal, normal;

	&.btn-primary {
		color: #fff;
		background-color: #007bff;
		border-color: #007bff;

		&:hover {
			background-color: #0069d9;
			border-color: #0062cc;
			color: white;
		}

		&:active {
			background-color: #0062cc;
			border-color: #005cbf;
		}
	}

	&.btn-secondary {
		color: #fff;
		background-color: #6c757d;
		border-color: #6c757d;

		&:hover {
			background-color: #5a6268;
			border-color: #545b62;
		}

		&:active {
			background-color: #545b62;
			border-color: #4e555b;
		}
	}

	&.btn-success {
		color: #fff;
		background-color: #28a745;
		border-color: #28a745;

		&:hover {
			background-color: #218838;
			border-color: #1e7e34;
		}

		&:active {
			background-color: #1e7e34;
			border-color: #1c7430;
		}
	}

	&.btn-danger {
		color: #fff;
		background-color: #dc3545;
		border-color: #dc3545;

		&:hover {
			background-color: #c82333;
			border-color: #bd2130;
		}

		&:active {
			background-color: #bd2130;
			border-color: #b21f2d;
		}
	}

	&.btn-warning {
		color: #212529;
		background-color: #ffc107;
		border-color: #ffc107;

		&:hover {
			background-color: #e0a800;
			border-color: #d39e00;
		}

		&:active {
			background-color: #d39e00;
			border-color: #c69500;
		}
	}

	&.btn-info {
		color: #fff;
		background-color: #17a2b8;
		border-color: #17a2b8;

		&:hover {
			background-color: #138496;
			border-color: #117a8b;
		}

		&:active {
			background-color: #117a8b;
			border-color: #10707f;
		}
	}

	&.btn-light {
		color: #212529;
		background-color: #f8f9fa;
		border-color: #f8f9fa;

		&:hover {
			background-color: #e2e6ea;
			border-color: #dae0e5;
		}

		&:active {
			background-color: #dae0e5;
			border-color: #d3d9df;
		}
	}

	&.btn-dark {
		color: #fff;
		background-color: #343a40;
		border-color: #343a40;

		&:hover {
			background-color: #23272b;
			border-color: #1d2124;
		}

		&:active {
			background-color: #1d2124;
			border-color: #171a1d;
		}
	}

	&.btn-link {
		font-weight: 400;
		color: #007bff;
		background-color: transparent;

		&:hover {
			color: #0056b3;
			text-decoration: underline;
			background-color: transparent;
			border-color: transparent;
		}
	}

	/* OUTLINE BUTTONS */

	&.btn-outline-primary {
		color: #007bff;
		background-color: transparent;
		background-image: none;
		border-color: #007bff;

		&:hover {
			color: #fff;
			background-color: #007bff;
			border-color: #007bff;
		}
	}

	&.btn-outline-secondary {
		color: #6c757d;
		background-color: transparent;
		background-image: none;
		border-color: #6c757d;

		&:hover {
			color: #fff;
			background-color: #6c757d;
			border-color: #6c757d;
		}
	}

	&.btn-outline-success {
		color: #28a745;
		background-color: transparent;
		background-image: none;
		border-color: #28a745;

		&:hover {
			color: #fff;
			background-color: #28a745;
			border-color: #28a745;
		}
	}

	&.btn-outline-danger {
		color: #dc3545;
		background-color: transparent;
		background-image: none;
		border-color: #dc3545;

		&:hover {
			color: #fff;
			background-color: #dc3545;
			border-color: #dc3545;
		}
	}

	&.btn-outline-warning {
		color: #ffc107;
		background-color: transparent;
		background-image: none;
		border-color: #ffc107;

		&:hover {
			color: #212529;
			background-color: #ffc107;
			border-color: #ffc107;
		}
	}

	&.btn-outline-info {
		color: #17a2b8;
		background-color: transparent;
		background-image: none;
		border-color: #17a2b8;

		&:hover {
			color: #fff;
			background-color: #17a2b8;
			border-color: #17a2b8;
		}
	}

	&.btn-outline-light {
		color: #f8f9fa;
		background-color: transparent;
		background-image: none;
		border-color: #f8f9fa;

		&:hover {
			color: #212529;
			background-color: #f8f9fa;
			border-color: #f8f9fa;
		}
	}

	&.btn-outline-dark {
		color: #343a40;
		background-color: transparent;
		background-image: none;
		border-color: #343a40;

		&:hover {
			color: #fff;
			background-color: #343a40;
			border-color: #343a40;
		}
	}

	/* SIZES */

	&.btn-lg {
		padding: 0.5rem 1rem;
		font-size: 1.25rem;
		line-height: 1.5;
		border-radius: 0.3rem;
	}

	&.btn-sm {
		padding: 0.25rem 0.5rem;
		font-size: 0.875rem;
		line-height: 1.5;
		border-radius: 0.2rem;
	}

	&.btn-block {
		display: block;
		width: 100%;
	}
}