button {
	border-radius: 0.1rem;
	border: 0;
	height: $unit-8;
	outline: none;
	padding: 0 1em;
	color: $primary-600;
	background: $lightgray-300;
	line-height: 2em;
	font-weight: 600;

	&.tooltip::after {
		font-size: $font-size-sm;
		text-transform: none;
	}

	&:hover {
		cursor: pointer;
		background: $primary-300;
	}
}

button.primary {
	background: $primary-500;
	color: #ffffff;

	&:hover {
		background: $primary-400;
	}
}

button.secondary {
	border: 1px solid $primary-500;
	background: #fff;
	color: $primary-500;
	font-weight: 600;

	&:hover {
		color: $primary-400;
		border: 1px solid $primary-600;
		background: $lightgray-300;
	}
}

button.text {
	color: $primary-500;
	font-weight: 600;
	background: transparent;

	&:hover {
		background: $lightgray-300;
	}
}

button.danger {
	background: #f8f8f8;
	color: $red-500;
	font-weight: 600;

	&:hover {
		color: #ffffff;
		background: $red-400;
	}
}

button.icon i {
	font-size: 1rem;
	margin-right: 0.2rem;
}

button.icon-only {
	padding: 0 0.4rem;

	i {
		margin-right: 0;
	}
}

button.disabled,
button:disabled {
	opacity: 0.46;
	pointer-events: none;
}

button.bottom {
	min-width: 10rem;
	margin-top: $unit-8;
}

.button-group {
	button {
		border-radius: 0;
	}

	button:first-of-type {
		border-radius: 0.1rem 0 0 0.1rem;
	}

	button:last-of-type {
		border-radius: 0 0.1rem 0.1rem 0;
	}

	&--shadow {
		box-shadow: 0 1px 2px rgba($color: #000000, $alpha: 0.24);
	}
}