// Buttons
a.button
, input[type="submit"]
, button.button
, li.button-medium a {
	@include cn-button-variant($font-white, $btn-primary-bg, null, null);
    border: 0;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    text-transform: capitalize;
    font-weight: $font-semibold;
    padding: #{$btn-padding};
    min-width:80px;
    text-overflow: ellipsis;
    overflow:hidden;
    @include border-radius($border-radius);
}

a.button-secondary {
	@include cn-button-variant($font-white, $btn-secondary-bg, null, null); 
}

a.button-primary {
	@include cn-button-variant($font-white, $btn-primary-bg, null, null); 
}

a.button-small, input[type="submit"].button-small {
	font-size: 14px;

	// Color
	color: $color-white;

	// Border
	border: 0px;
	background-color: $bg-primary;

	// Text
	text-transform: capitalize;
	font-weight: $font-normal;
	font-style: normal;

	// Padding
	padding: 8px #{$padding-horz-lg};

	// Animation
	@include transition(0, 0.1s, background-color, linear);
	@include transition(0, 0.1s, color, linear);

	// Hover
	&:hover {
		color: $font-white;
		background-color: $bg-primary;
	}
}

a.button-medium, input[type="submit"].button-medium, li.button-medium a { 

	// Text
	text-transform: capitalize;
	font-weight: $font-normal;
	font-style: normal;

	// Padding
	padding: $padding-all;

	@include cn-button-variant($font-white, $btn-primary-bg, null, $btn-primary-bg-hover);
    @include anim-link-fade();
}

a.button-x-large, input[type="submit"].button-x-large, li.button-x-large a { 

	// Text
	text-transform: capitalize;
	font-weight: $font-normal;
	font-style: normal;
	font-size: 24px;

	// Padding
	padding: 20px 60px;

	@include cn-button-variant($link-base-color, $bg-white, $font-white, $btn-primary-bg-hover);
    @include anim-link-fade();
    border: 2px solid $font-gray-light;

}