//  =================
//      Imports
//  =================

@import '../../../base/color_variables';    // Color Variables
@import '../../../base/fonticons';        // Fonticons Variables
@import '../../../base/urls';           // URLS Variables
@import '../../../base/utilities_variables';  // Utilities Variables


/* 2.0 - Button style
------------------------------------------------------------------------*/
/* 2.1 - Default Button style
-------------------------------------------------*/
.hb {
	display: inline-block;
	position: $pos-rel;
	text-align: $align-center;
	z-index: 0;
	box-sizing: border-box;
	-webkit-transition: all .25s ease;
	-moz-transition: all .25s ease;
	-ms-transition: all .25s ease;
	-o-transition: all .25s ease;
	transition: all .25s ease;
	&:before {
		position: $pos-abs;
		content: "";
		left: -1px;
		top: 0;
		z-index: -1;
		-webkit-transform: rotate(60deg);
		-moz-transform: rotate(60deg);
		-ms-transform: rotate(60deg);
		-o-transform: rotate(60deg);
		transform: rotate(60deg);
		box-sizing: border-box;
		-webkit-transition: all .25s ease;
		-moz-transition: all .25s ease;
		-ms-transition: all .25s ease;
		-o-transition: all .25s ease;
		transition: all .25s ease;
	}
	&:after {
		position: $pos-abs;
		content: "";
		left: -1px;
		top: 0;
		z-index: -1;
		-webkit-transform: rotate(-60deg);
		-moz-transform: rotate(-60deg);
		-ms-transform: rotate(-60deg);
		-o-transform: rotate(-60deg);
		transform: rotate(-60deg);
		box-sizing: border-box;
		-webkit-transition: all .25s ease;
		-moz-transition: all .25s ease;
		-ms-transition: all .25s ease;
		-o-transition: all .25s ease;
		transition: all .25s ease;
	}
	i {
		z-index: 9;
		-webkit-transition: all .25s ease;
		-moz-transition: all .25s ease;
		-ms-transition: all .25s ease;
		-o-transition: all .25s ease;
		transition: all .25s ease;
	}
}
.hb-xs {
	.fa {
		font-size: 20px !important;
	}
}
.hb-sm {
	.fa {
		font-size: 30px !important;
	}
}
.hb-md {
	.fa {
		font-size: 37px !important;
	}
}
.hb-lg {
	.fa {
		font-size: 42px !important;
	}
}
/* 2.1 - Default Button style End
-------------------------------------------------*/



/* 2.2 - Large Button style 
-------------------------------------------------*/
.hb-lg {
	line-height: 42px;
	font-size: 42px;
	margin: 22px 0px;
	height: 42px;
	width: 73px;
	&:before {
		height: 42px;
		width: 73px;
	}
	&:after {
		height: 42px;
		width: 73px;
	}
}
/* 2.2 - Large Button style  End
-------------------------------------------------*/



/* 2.3 - Medium Button style 
-------------------------------------------------*/
.hb-md {
	line-height: 37px;
	font-size: 37px;
	margin: 21px 0px;
	height: 37px;
	width: 64px;
	&:before {
		height: 37px;
		width: 64px;
	}
	&:after {
		height: 37px;
		width: 64px;
	}
}
/* 2.3 - Medium Button style End
-------------------------------------------------*/




/* 2.4 - Small Button style 
-------------------------------------------------*/
.hb-sm {
	line-height: 30px;
	font-size: 30px;
	margin: 18.5px 0px;
	height: 30px;
	width: 52px;
	&:before {
		height: 30px;
		width: 52px;
	}
	&:after {
		height: 30px;
		width: 52px;
	}
}
/* 2.4 - Small Button style  End
-------------------------------------------------*/




/* 2.5 - Extra Small Button style 
-------------------------------------------------*/
.hb-xs {
	line-height: 18.5px;
	font-size: 18.5px;
	margin: 9.5px 0px;
	height: 18.5px;
	width: 32px;
	&:before {
		height: 18.5px;
		width: 32px;
	}
	&:after {
		height: 18.5px;
		width: 32px;
	}
}
/* 2.5 - Extra Small Button style  End
-------------------------------------------------*/

/* 2.0 - Button style End
------------------------------------------------------------------------*/


/* 3.0 - Margin of hexagon
------------------------------------------------------------------------*/
.hb-lg-margin {
	margin: 9px;
	display: inline-block;
	overflow: hidden;
	height: 89px;
	width: 73px;
}
.hb-md-margin {
	margin: 12px;
	display: inline-block;
	overflow: hidden;
	height: 80px;
	width: 65px;
}
.hb-sm-margin {
	margin: 14px;
	display: inline-block;
	overflow: hidden;
	height: 66px;
	width: 53px;
}
.hb-xs-margin {
	margin: 15px;
	display: inline-block;
	overflow: hidden;
	height: 38px;
	width: 32px;
}
/* 3.0 - Margin of hexagon End
------------------------------------------------------------------------*/


.hb {
	background-color: $color_312;
	border-left: $b-width-1 $solid $color_312;
	border-right: $b-width-1 $solid $color_312;
	color: $color_163;
	&:before {
		background-color: $color_312;
		border-left: $b-width-1 $solid $color_312;
		border-right: $b-width-1 $solid $color_312;
		color: $color_163;
	}
	&:after {
		background-color: $color_312;
		border-left: $b-width-1 $solid $color_312;
		border-right: $b-width-1 $solid $color_312;
		color: $color_163;
	}
	&:hover {
		background: $color_none;
		border-left: $b-width-1 $solid $color_163;
		border-right: $b-width-1 $solid $color_163;
		color: $color_163;
		&:before {
			background: $color_none;
			border-left: $b-width-1 $solid $color_163;
			border-right: $b-width-1 $solid $color_163;
			color: $color_163;
		}
		&:after {
			background: $color_none;
			border-left: $b-width-1 $solid $color_163;
			border-right: $b-width-1 $solid $color_163;
			color: $color_163;
		}
	}
}

/* 5.3 - Custom Button colors
-------------------------------------------------*/
.hb-custom {
	background: $additional-color-6 !important;
	color: $white !important;
	border-left: $b-width-1 $solid $additional-color-6 !important;
	border-right: $b-width-1 $solid $additional-color-6 !important;
	&:before {
		background: $additional-color-6 !important;
		color: $white !important;
		border-left: $b-width-1 $solid $additional-color-6 !important;
		border-right: $b-width-1 $solid $additional-color-6 !important;
	}
	&:after {
		background: $additional-color-6 !important;
		color: $white !important;
		border-left: $b-width-1 $solid $additional-color-6 !important;
		border-right: $b-width-1 $solid $additional-color-6 !important;
	}
	&:hover {
		background: $additional-color-11 !important;
		border-left: $b-width-1 $solid $additional-color-11 !important;
		color: $white !important;
		border-right: $b-width-1 $solid $additional-color-11 !important;
		&:before {
			background: $additional-color-11 !important;
			border-left: $b-width-1 $solid $additional-color-11 !important;
			color: $white !important;
			border-right: $b-width-1 $solid $additional-color-11 !important;
		}
		&:after {
			background: $additional-color-11 !important;
			border-left: $b-width-1 $solid $additional-color-11 !important;
			color: $white !important;
			border-right: $b-width-1 $solid $additional-color-11 !important;
		}
	}
}
/* 5.3 - Custom Button colors End
-------------------------------------------------*/

/* 6.1 - Facebook
-------------------------------------------------*/
.hb-facebook {
	background: $primary;
	border-color: $primary;
	color: $white;
	&:before {
		background: $primary;
		border-color: $primary;
		color: $white;
	}
	&:after {
		background: $primary;
		border-color: $primary;
		color: $white;
	}
	&:hover {
		background: $color_none;
		border-color: $color_57;
		color: $color_57;
		&:before {
			background: $color_none;
			border-color: $color_57;
			color: $color_57;
		}
		&:after {
			background: $color_none;
			border-color: $color_57;
			color: $color_57;
		}
	}
}
/* 6.1 - Facebook End
-------------------------------------------------*/

/* 6.2 - Twitter
-------------------------------------------------*/
.hb-twitter {
	background: $info;
	border-color: $info;
	color: $white;
	&:before {
		background: $info;
		border-color: $info;
		color: $white;
	}
	&:after {
		background: $info;
		border-color: $info;
		color: $white;
	}
	&:hover {
		background: $color_none;
		border-color: $info;
		color: $info;
		&:before {
			background: $color_none;
			border-color: $info;
			color: $info;
		}
		&:after {
			background: $color_none;
			border-color: $info;
			color: $info;
		}
	}
}
/* 6.2 - Twitter End
-------------------------------------------------*/

/* 6.3 - Google Plus
-------------------------------------------------*/
.hb-google-plus {
	background: $danger;
	border-color: $danger;
	color: $white;
	&:before {
		background: $danger;
		border-color: $danger;
		color: $white;
	}
	&:after {
		background: $danger;
		border-color: $danger;
		color: $white;
	}
	&:hover {
		background: $color_none;
		border-color: $danger;
		color: $danger;
		&:before {
			background: $color_none;
			border-color: $danger;
			color: $danger;
		}
		&:after {
			background: $color_none;
			border-color: $danger;
			color: $danger;
		}
	}
}
/* 6.3 - Google Plus End
-------------------------------------------------*/

/* 6.15 - dribbble
-------------------------------------------------*/
.hb-dribbble {
	background: $warning;
	border-color: $warning;
	color: $white;
	&:before {
		background: $warning;
		border-color: $warning;
		color: $white;
	}
	&:after {
		background: $warning;
		border-color: $warning;
		color: $white;
	}
	&:hover {
		background: $color_none;
		border-color: $warning;
		color: $warning;
		&:before {
			background: $color_none;
			border-color: $warning;
			color: $warning;
		}
		&:after {
			background: $color_none;
			border-color: $warning;
			color: $warning;
		}
	}
}
/* 6.15 - dribbble End
-------------------------------------------------*/