ul.gf-social-icon {
	font-size: 14px;
	padding-left: 0;
	> li {
		margin: 0 10px 10px 0;
		display: inline-block;
		color: @disable_color;
	}
}

ul.social-icon-circle {
	> li > a {
		width: 39px;
		height: 39px;
		text-align: center;
		display: block;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		border-radius: 50%;
		color: #fff;
		/*&:extend(.bg-accent-color);
		&:extend(.border-accent-color);*/
		position: relative;
		> i {
			line-height: 39px;
		}
	}
}

ul.social-icon-square {
	> li > a {
		&:extend(.primary-font);
		font-size: 12px;
		text-transform: uppercase;
		.rgba-color(@heading_color, 0.3);
		letter-spacing: 0.1em;
		display: inline-block;
		background-color: #f7f7f7;
		border: 1px solid @border_color;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
		font-weight: bold;
		width: 170px;
		height: 40px;
		text-align: center;
		line-height: 40px;
		i {
			position: absolute;
			margin-left: -5px;
			line-height: 38px;
			.opacity(0);
			.transform(translateX(0));
			.transition(opacity .5s, transform .5s);
		}
		.transition(all .5s);
		&:hover,
		&:focus {
			&:extend(.bg-accent-color);
			&:extend(.foreground-accent-color);
			&:extend(.border-accent-color);
			i {
				.transform(translateX(-100%));
				.opacity(1);
			}
		}
	}
}

ul.social-icon-circle-outline {
	> li > a {
		width: 40px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		display: block;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		border-radius: 50%;
		border: 1px solid @border_color;
		&:extend(.disable-color);
		font-size: 14px;
		.transition(all .5s);
		&:hover,
		&:focus {
			&:extend(.bg-accent-color);
			&:extend(.border-accent-color);
			&:extend(.foreground-accent-color);
		}
	}
}