//
// Button Styles
// --------------------------------------------------

.h-btn{
	display: inline-block;
	background-color: transparent;
	color: $black;
	@include transition(color .3s ease-in-out);
	//@include btn-shadow();
	font-family: $font-family-blanc-reg;
	text-transform: uppercase;
	border-radius: 3px;

	&.has-caret{
		span.h-caret{
			display: inline-block;
			width: 8px;
			height: 12px;
			margin-left: 10px;
			@include transition(all 300ms ease-in);
		}
	}

	&.lrg{
		font-size: $font-size-reg;
		padding: 10px 24px;
	}

	&.sml{
		padding: 8px 14px;
		font-size: $font-size-reg - 2;
	    line-height: 14px;

		&.has-caret{
			span.h-caret{
				background-size: 6px 9px !important;
				margin-bottom: -2px;
				margin-right: -3px;
			}
		}
	}

	&.light{
		color: $green-light;

		&.has-border{
			border: 2px solid $green-light;
		}

		&.has-caret{
			span.h-caret{
				background: image-url('../images/caret-light.png') 0 0 no-repeat;
				@include img-retina("../images/caret-light.png", "../images/caret-light@2x.png", 8px, 12px);
			}
		}
	}

	&.green{
		color: $green;

		&.has-border{
			border: 2px solid $green;
		}

		span.h-caret{
			background: image-url('../images/caret-green.png') 0 0 no-repeat;
			@include img-retina("../images/caret-green.png", "../images/caret-green@2x.png", 8px, 12px);
		}

		&.fill{
			background-color: $green;
			color: $white;

			span.h-caret{
				background: image-url('../images/caret-white.png') 0 0 no-repeat;
				@include img-retina("../images/caret-white.png", "../images/caret-white@2x.png", 8px, 12px);
			}
		}
	}

	&.gray{
		color: $blue-light;

		&.border{
			border: 2px solid $blue-light;
		}

		&.fill{
			background-color: $blue-light;
			color: $white;

			span.h-caret{
				background: image-url('../images/caret-white.png') 0 0 no-repeat;
				@include img-retina("../images/caret-white.png", "../images/caret-white@2x.png", 8px, 12px);
			}
		}
	}

	&.dark{
		color: $green-dark;

		&.border{
			border: 2px solid $green-dark;
		}
	}

	&:hover{
		text-decoration: none;
		@include transition(color 200ms ease-in);

		&.has-caret{
			span.h-caret{
				@include translate(4px, 0);
				@include transition(all 200ms ease-in);
			}
		}
	}
}