/* =Styling the Vantage social media widget
----------------------------------------------- */
@import "../mixins";

.widget_vantage-social-media {

	.clearfix();

	.social-button-style(@color) {
		.gradient(@color, @color, lighten(@color, 3%));
		border: 1px solid darken(@color, 5%);

		&:hover {
			@hover_color: lighten(@color, 4%);
			.gradient(@hover_color, @hover_color, lighten(@hover_color, 3%));
			border: 1px solid darken(@hover_color, 5%);
		}
	}

	.social-media-icon {
		text-decoration: none;
		display: block;
		float: left;
		margin-right: 4px;

		position: relative;

		width: 36px;
		height: 36px;
		.rounded(3px);
		.box-shadow(~"inset 0 1px 0 rgba(255,255,255,0.2), 0 1px 1px rgba(0,0,0,0.1)");

		[class^="fa fa-"]{
			width: 1em;
			height: 1em;
			text-align: center;
			display: block;
			position: absolute;
			line-height: 1em;
			color: #ffffff;
			top: 50%;
			left: 50%;
			margin-top: -0.45em;
			margin-left: -0.5em;
			font-size: 18px;
			text-shadow: 0 1px 1px rgba(0,0,0,0.125);
		}

		img {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 18px;
			height: 18px;
			margin-left: -9px;
			margin-top: -8px;
		}

		&:last-child {
			margin-right: 0;
		}

		/* The icons */
		&.social-media-icon-facebook {
			.social-button-style(#597ac7);
		}

		&.social-media-icon-twitter {
			.social-button-style(#5bbcec);
			.box-shadow(~"inset 0 1px 0 rgba(255,255,255,0.25), 0 1px 1px rgba(0,0,0,0.1)");
		}

		&.social-media-icon-google-plus {
			.social-button-style(#f80000);
		}

		&.social-media-icon-rss {
			.social-button-style(#ff9200);
		}

		&.social-media-icon-linkedin {
			.social-button-style(#0070b4);
		}

		&.social-media-icon-dribbble {
			.social-button-style(#ea4d89);
		}

		&.social-media-icon-flickr {
			.social-button-style(#444444);
		}

		&.social-media-icon-instagram {
			.social-button-style(#426f98);
		}

		&.social-media-icon-pinterest {
			.social-button-style(#fd3832);
		}

		&.social-media-icon-skype {
			.social-button-style(#09c6ff);
		}

		&.social-media-icon-youtube {
			.social-button-style(#ff3635);
		}

		&.social-media-icon-github {
			.social-button-style(#333333);

			[class^="fa fa-"] {
				color: #f5f5f5;
			}
		}

		&.social-media-icon-vimeo {
			.social-button-style(#42b8ff);
			.box-shadow(~"inset 0 1px 0 rgba(255,255,255,0.25), 0 1px 1px rgba(0,0,0,0.1)");
		}

		&.social-media-icon-vk {
			.social-button-style(#537599);
		}

		&.social-media-icon-envelope {
			.social-button-style(#34aadc);
		}

		&.social-media-icon-phone {
			.social-button-style(#4cd964);
		}

		&.social-media-icon-stumbleupon {
			.social-button-style(#eb4924);
		}

		&.social-media-icon-behance {
			.social-button-style(#1769ff);
		}

		&.social-media-icon-deviantart {
			.social-button-style(#05cc47);
		}

		&.social-media-icon-500px {
			.social-button-style(#34bf49);
		}

		&.social-media-icon-medium {
			.social-button-style(#02b875);
		}

		&.social-media-icon-tumblr {
			.social-button-style(#35465c);
		}

		&.social-media-icon-wordpress {
			.social-button-style(#21759b);
		}

		&.social-media-icon-bitbucket {
			.social-button-style(#205081);
		}

		&.social-media-icon-codepen {
			.social-button-style(#0ebeff);
		}

		&.social-media-icon-mixcloud {
			.social-button-style(#589fc3);
		}

		&.social-media-icon-soundcloud {
			.social-button-style(#ff8800);
		}

		&.social-media-icon-size-small {
			width: 24px;
			height: 24px;
			.rounded(2px);

			[class^="fa fa-"]{
				font-size: 12px;
			}

			img {
				width: 12px;
				height: 12px;
				margin-left: -6px;
				margin-top: -6px;
			}
		}

		&.social-media-icon-size-large {
			width: 48px;
			height: 48px;
			.rounded(4px);

			[class^="fa fa-"]{
				font-size: 22px;
			}

			img {
				width: 22px;
				height: 22px;
				margin-left: -11px;
				margin-top: -10px;
			}
		}

	}
}

@media (max-width:680px) {
	body.responsive {
		.widget_vantage-social-media {
			text-align: center;

			.social-media-icon {
				display: inline-block;
				float:none;
			}
		}
	}
}