a.btn,
.btn {
	border: 1px solid transparent;
	border-radius: 8px;
	padding: 8px 16px;
	font-size: 12px;
	transition: all 0.3s cubic-bezier(0.32, 0.18, 0.43, 1.05);
	
	&:hover,
	&:active,
	&:visited,
	&:focus {
		outline: none;
		border-color: transparent;
	}
	&-xs {
		font-size: 10px;
		padding: 2px 8px;
	}
	&-sm {
		padding: 6px 14px;
	}
	&-md {
		padding: 10px 16px;
	}
	&-lg {
		margin: 5px;
		font-size: 14px;
		padding: 14px 20px;
	}
	&-flat {
		border-radius: 0;
	}
	&-rounded {
		border-radius: 20px;
	}
	.fa {
		margin-right: 5px;
	}

	@each $c, $h in $colors {
		&-#{$c} {
			background-color: $h;
			color: $white;
			
			@if $c == 'clouds' {
				color: $asbestos;
			}
			
			@if $c == 'link' {
				color: $peterriver;
				background-color: transparent;
			}

			@if $c == 'default' {
				color: $asbestos;
			}

			&:hover,
			&:focus,
			&:active {
				color: $white;
				background-color: darken($h, 10%);

				@if $c == 'clouds' or $c == 'default' {
					color: $asbestos;
				}
				
				@if $c == 'link' {
					color: $peterriver;
					background-color: transparent;
				}
			}
		}
	}
}

a.btn-outline,
.btn-outline {
	border: 1px solid;
	background-color: transparent;

	@each $c, $h in $colors {
		&.btn-#{$c} {
			border-color: $h;
			color: $h;

			@if $c == 'clouds' or $c == 'default' {
				color: $asbestos;
				border-color: darken($h, 10%);
			}
			
			@if $c == 'link' {
				color: $peterriver;
				border-color: $peterriver;
			}

			&:hover,
			&:focus,
			&:active {
				color: $white;
				background-color: $h;

				@if $c == 'clouds' or $c == 'default' {
					color: $asbestos;
				}
			
				@if $c == 'link' {
					color: $peterriver;
					background-color: transparent;
				}
			}
		}
	}
}