/*
*
* Icons
*/

//
// Base styles
//
.icon {
	display: inline-block;
	font-size: 15px;
	line-height: 1;

	&::before {
		position: relative;
		display: inline-block;
		font-weight: 400;
		font-style: normal;
		speak: none;
		text-transform: none;
	}
}

.bg-gray-31 a.icon {
	&, 
	&:focus, 
	&:active {
		color: $gray-27;
	}
	&:hover {
		color: $secondary;
	}
}

//
// Alternate icons
//

.icon-default {
}

.icon-primary {
}

.icon-secondary {
	color: $secondary;
	
	.bg-gray-31 &{
		color: $secondary;
	}
}

//
// Icon Shapes
//
.icon-circle {
	border-radius: 50%;
	
	&.icon-rounded {
		width: 27px;
		height: 27px;
		line-height: 27px;
		text-align: center;
	}
}

a.icon-circle.icon-rounded {
	&.fa-facebook {
		&, &:focus, &:active {
		  color: $white;
			background-color: $facebook;
		}
		&:hover {
		  background-color: $primary;
		}
	}
	&.fa-google-plus {
		&, &:focus, &:active {
		  color: $white;
			background-color: $google;
		}
		&:hover {
		  background-color: $primary;
		}
	}
	&.fa-twitter {
		&, &:focus, &:active {
		  color: $white;
			background-color: $twitter;
		}
		&:hover {
		  background-color: $primary;
		}
	}
	&.fa-pinterest-p {
		&, &:focus, &:active {
		  color: $white;
			background-color: $pinterest;
		}
		&:hover {
		  background-color: $primary;
		}
	}
}


//
// Icon Sizes
//
.icon-xs {
}

.icon-sm {
}

.icon-lg {
}

.icon {
	&.icon-1 {
		font-size: 25px;
	}

	&.icon-2 {
		font-size: 24px;
	}

	&.icon-3 {
		font-size: 27px;
	}

	&.icon-4 {
		font-size: 13px;
	}

	&.icon-5 {
		font-size: 14px;
	}

	&.icon-6 {
		font-size: 15px;
	}

	&.icon-7 {
		font-size: 18px;
	}
}