.bio-button {
	position: relative;
	padding-top: 0.75em;
	padding-bottom: 0.75em;
	padding-left: 1em;
	padding-right: 1em;
	border-radius: 3px;
	color: $color-light;
	background-color: $color-primary;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 100%;
	user-select: none;
	transition: all 0.16s ease-in-out;
	font-weight: 500;
	font-size: 1rem;
	cursor: pointer;

	// State
	&:hover {
		background-color: lighten($color-primary, 8%);
	}

	// Size
	&.-small {
		font-size: 0.75rem;
	}

	&.-big {
		font-size: 1.25rem;
	}

	// Style
	&.-raised {
		box-shadow: 0 8px 25px -8px $color-primary;
		&:hover {
			transform: translateY(-1px);
			box-shadow: 0 10px 28px -8px $color-primary;
		}
	}

	&.-outline {
		color: $color-primary;
		background-color: transparent;
		border: 1px solid $color-primary;
		padding-top: calc(0.75em - 1px);
		padding-bottom: calc(0.75em - 1px);
		&:hover {
			background: transparentize($color-primary, 0.9);
		}
	}

	&.-flat {
		color: $color-primary;
		background-color: transparent;
		&:hover {
			background: transparentize($color-primary, 0.9);
		}
	}

	&.-disabled {
		cursor: not-allowed;
		opacity: .5;
	}

	&.-loading {
		color: transparent;
		&:after {
			content: "";
			position: absolute;
			height: 1em;
			width: 1em;
			animation: spinAround 500ms infinite linear;
			border: 3px solid;
			border-radius: 9999px;
			border-right-color: $color-light;
			border-top-color: $color-light;
		}
		&.-outline,
		&.-flat {
			&:after {
				border-right-color: $color-primary;
				border-top-color: $color-primary;
			}
		}
	}

	@each $key, $value in $components-colors {
		&.-#{$key} {
			background-color: $value;
			&:hover {
				background-color: lighten($value, 8%);
			}
			&.-raised {
				box-shadow: 0 8px 25px -8px $value;
				&:hover {
					box-shadow: 0 10px 28px -8px $value;
				}
			}
			&.-outline {
				color: $value;
				background-color: transparent;
				border-color: $value;
				&:hover {
					background: transparentize($value, 0.9);
				}
			}
			&.-flat {
				color: $value;
				background-color: transparent;
				&:hover {
					background: transparentize($value, 0.9);
				}
			}
			&.-loading.-outline,
			&.-loading.-flat {
				color: transparent;
				&:after {
					color: $value;
					border-right-color: transparent;
					border-top-color: transparent;
				}
			}
		}
	};
}

@keyframes spinAround {
	from {
	-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
	}
	to {
	-webkit-transform: rotate(359deg);
			transform: rotate(359deg);
	}
}