.edgtf-btn {
	display: inline-block;
	vertical-align: middle;
	position: relative;
	outline: none;
	font-size: 21px;
	font-style: normal;
	font-weight: 500;
	font-family: inherit;
	line-height: 1.2em;
	text-transform: none;
	padding: 8px 49px;
	border-radius: 3px;

	@include edgtfTransition(color 0.15s ease-out, background-color 0.15s ease-out, border-color 0.15s ease-out);
	@include edgtfBoxSizing(border-box);
	transform: translateZ(0); //because of the shivering when more buttons are on the same page

	.edgtf-btn-text{
		display: table-cell;
		vertical-align: middle;
	}

	&.edgtf-btn-solid {
		background-color: $first-main-color;
		border: 3px solid $first-main-color;
		color: #fff;
		padding: 0;

		.edgtf-btn-text{
			padding: 8px 49px;
		}

		&.edgtf-btn-small{
			padding: 0;

			.edgtf-btn-text {
				padding: 8px 26px;
			}
		}

		&.edgtf-btn-medium {
			padding: 0;
			.edgtf-btn-text {
				padding: 8px 38px;
			}
		}

		&.edgtf-btn-large{
			//same as default
		}

		&.edgtf-btn-huge{
			padding: 0;

			.edgtf-btn-text {
				padding: 8px 70px;
			}
		}

		&.edgtf-btn-huge-full-width{
			padding: 0;

			.edgtf-btn-text {
				display: inline-block;
				padding: 17px 47px;
				@include edgtfBoxSizing(border-box);
			}

			.edgtf-btn-icon-holder{
				display: inline-block;
			}

			.edgtf-btn-icon-holder:after{
				display: none;
			}
		}

		&.edgtf-btn-icon {
			.edgtf-btn-text{
				padding: 13px 33px;
			}

			&.edgtf-btn-small .edgtf-btn-text {
				padding: 12px 17px;
			}

			&.edgtf-btn-medium .edgtf-btn-text {
				padding: 12px 25px;
			}

			&.edgtf-btn-huge .edgtf-btn-text{
				padding: 17px 47px;
			}
		}

		&:after{
			content: '';
			position: absolute;
			top: -3px;
			left: -3px;
			height: calc(100% + 6px);
			width: calc(100% + 6px);
			background-color: rgba(255,255,255,0.1);
			opacity: 0;
			z-index: -1;
			@include edgtfTransition(opacity .2s ease-out);
		}

		&:not(.edgtf-btn-custom-hover-bg):hover:after {
			opacity: 1;
		}
	}

	&.edgtf-btn-solid-white {
		background-color: #fff;
        border: 3px solid #fff;
		color: $first-main-color;
		padding: 0;

		.edgtf-btn-text{
			padding: 8px 49px;
		}

		&.edgtf-btn-small{
			padding: 0;

			.edgtf-btn-text {
				padding: 8px 26px;
			}
		}

		&.edgtf-btn-medium {
			padding: 0;
			.edgtf-btn-text {
				padding: 8px 38px;
			}
		}

		&.edgtf-btn-large{
			//same as default
		}

		&.edgtf-btn-huge{
			padding: 0;

			.edgtf-btn-text {
				padding: 17px 70px;
			}
		}

		&.edgtf-btn-huge-full-width{
			padding: 0;

			.edgtf-btn-text {
				display: inline-block;
				padding: 17px 47px;
				@include edgtfBoxSizing(border-box);
			}

			.edgtf-btn-icon-holder{
				display: inline-block;
			}

			.edgtf-btn-icon-holder:after{
				display: none;
			}
		}

		&.edgtf-btn-icon {
			.edgtf-btn-text{
				padding: 13px 33px;
			}

			&.edgtf-btn-small .edgtf-btn-text {
				padding: 12px 17px;
			}

			&.edgtf-btn-medium .edgtf-btn-text {
				padding: 12px 25px;
			}

			&.edgtf-btn-huge .edgtf-btn-text{
				padding: 17px 47px;
			}
		}

		&:after{
			content: '';
			position: absolute;
			top: -3px;
			left: -3px;
			height: calc(100% + 6px);
			width: calc(100% + 6px);
			background-color: rgba(0,0,0,0.1);
			opacity: 0;
			z-index: -1;
			@include edgtfTransition(opacity .2s ease-out);
		}

		&:not(.edgtf-btn-custom-hover-bg):hover:after {
			opacity: 1;
		}
	}

	&.edgtf-btn-outline {
		border: 3px solid $first-main-color;
		color: $first-main-color;
		background-color: transparent;

		&:not(.edgtf-btn-custom-hover-color):hover {
			//important because of inline color attribute. :not is used so we don't have to use important in JS
			color: #fff !important;
		}

		&:not(.edgtf-btn-custom-hover-bg):hover {
			//important because of inline color attribute. :not is used so we don't have to use important in JS
			background-color: $first-main-color !important;
		}

		&:not(.edgtf-btn-custom-border-hover):hover {
			//important because of inline color attribute. :not is used so we don't have to use important in JS
			border-color: $first-main-color !important;
		}

		&.edgtf-btn-icon .edgtf-btn-text{
			padding-right: 4px;
		}

		&.edgtf-btn-huge-full-width .edgtf-btn-text,
		&.edgtf-btn-huge-full-width .edgtf-btn-icon-holder{
			display: inline-block;
			@include edgtfBoxSizing(border-box);
		}
	}

	&.edgtf-btn-outline-white{
		border: 3px solid $header-light-color;
		color: $header-light-color;

		&:not(.edgtf-btn-custom-hover-color):hover {
			//important because of inline color attribute. :not is used so we don't have to use important in JS
			color: $first-main-color !important;
		}

		&:not(.edgtf-btn-custom-hover-bg):hover {
			//important because of inline color attribute. :not is used so we don't have to use important in JS
			background-color: $header-light-color !important;
		}

		&:not(.edgtf-btn-custom-border-hover):hover {
			//important because of inline color attribute. :not is used so we don't have to use important in JS
			border-color: $header-light-color !important;
		}
	}

	&.edgtf-btn-transparent {
		color: $first-main-color;
		padding: 5px 0;

		&.edgtf-btn-small {
			font-size: 14px;
			padding: 5px 0;
		}

		&.edgtf-btn-medium{
			font-size: 18px;
			padding: 5px 0;
		}

		&.edgtf-btn-large {
			font-size: 21px;
		}

		&.edgtf-btn-huge,
		&.edgtf-btn-huge-full-width {
			font-size: 23px;
			padding: 5px 0;
		}

		&.edgtf-btn-icon .edgtf-btn-text{
			padding-right: 4px;
		}

		&:hover {
			.edgtf-btn-icon-holder {
				@include edgtfTransform(translateX(5px));
			}
		}

		&:not(.edgtf-btn-icon):hover{
			color: #ababab;
		}
	}

	&.edgtf-btn-small{
		padding: 8px 26px;
	}

	&.edgtf-btn-medium {
		padding: 8px 38px;
	}

	&.edgtf-btn-large{
		//same as default
	}

	&.edgtf-btn-huge{
		padding: 8px 70px;
	}

	&.edgtf-btn-huge-full-width {
		width: 100%;
		text-align: center;
		padding: 8px;
	}

	&.edgtf-btn-icon {

		.edgtf-btn-icon-holder {
			position: relative;
			display: table-cell;
			vertical-align: middle;
			text-align: center;
			-webkit-transition: -webkit-transform .15s ease-out;
			transition: transform .15s ease-out;
			font-size: 1em;

			.edgtf-icon-font-elegant{
				position: relative;
				vertical-align: middle;
			}
		}
	}

	&.edgtf-btn-icon.edgtf-btn-solid,
	&.edgtf-btn-icon.edgtf-btn-solid-white {
		overflow: hidden;

		&:after{
			display: none;
		}

		.edgtf-btn-text{
			-webkit-transition: -webkit-transform .15s ease-out;
			transition: transform .15s ease-out;
		}

		.edgtf-btn-icon-holder {
			width: 45px;

			&:after{
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(255,255,255,0.03);
				z-index: -1;
			}
		}

		&:hover{

			.edgtf-btn-icon-holder{
				@include edgtfTransform(translateX(45px));
			}

			.edgtf-btn-text{
				@include edgtfTransform(translateX(22px));
			}
		}
	}

	&.edgtf-btn-icon.edgtf-btn-solid-white{

		.edgtf-btn-icon-holder {

			&:after{
				background-color: rgba(0,0,0,0.1);
			}
		}
	}
}

input[type=submit].edgtf-btn,
button.edgtf-btn {
	cursor: pointer;
	border: none;
}

//Mozilla height fix
button.edgtf-btn::-moz-focus-inner{
	border: 0;
	padding: 0;
}

input[type=submit].edgtf-btn{
	padding: 10px 49px;

	&.edgtf-btn-small{
		padding: 10px 26px;
	}

	&.edgtf-btn-medium {
		padding: 10px 38px;
	}

	&.edgtf-btn-large{
		//same as default
	}

	&.edgtf-btn-huge,
	&.edgtf-btn-huge-full-width{
		padding: 17px 70px;
	}

	&:hover{
		background-color: #444;
	}
}