// Social Likes by Artem Sapegin. http://sapegin.github.io/social-likes/
// Flat skin
// Design: Genn Osipenko, http://genn.org/

@import '../base'
@import 'font/social-likes'

light_gray = #999;
margin = .5em;

button-colors(button, color) {
	.social-likes__widget_{button} {
		background:color;
	}
	.social-likes_light .social-likes__button_{button} {
		color:color;
	}
}

.social-likes {
	min-height:36px;
	margin:(-(margin));
	transform:translate3d(0,0,0);  // Prevent icons shift when appearing

	&,
	&_single-w {
		line-height:1.5;
	}

	&,
	&__widget_single {
		font-size:14px;  // Base font size
	}
	
	&__widget {
		margin:margin;
		line-height:1.5;
		border:0;
		text-align:left;
		cursor:pointer;
	}

	&__button,
	&__counter {
		box-sizing:border-box;
		font-family:"Helvetica Neue", Arial, sans-serif;
		vertical-align:baseline;
		color:#fff;
	}

	&__button {
		padding:.04em .7em .18em 1.65em;
		font-weight:bold;
		-webkit-font-smoothing:antialiased;
		-moz-osx-font-smoothing:grayscale;
	}

	&__icon {
		top:0;
		left:.21em;
		font-family:"social-likes";
		font-weight:normal;
		font-style:normal;
		speak:none;
		text-transform:none;
		font-size:1.15em;
		vertical-align:baseline;
	}

	&__counter {
		padding-right:.5em;
		font-weight:normal;
		font-size:.85em;
	}

	// Vertical mode
	&_vertical {
		.social-likes__widget {
			min-width:13em;
		}
		.social-likes__counter {
			position:absolute;
			top:0;
			right:0;
			margin-top:.3em;
		}
	}

	// Light mode
	&_light .social-likes__widget {
		min-width:0;
		background:none;
	}
	&_light .social-likes__button,
	&_single-light + .social-likes__button {
		min-width:0;
		padding-left:1.35em;
		font-weight:normal;
		text-decoration:underline;
		-webkit-font-smoothing:subpixel-antialiased;
		-moz-osx-font-smoothing:auto;
	}
	&_light .social-likes__icon {
		margin-top:-.1em;
		margin-left:-.25em;
	}
	&_light .social-likes__counter,
	&_single-light + .social-likes__button + .social-likes__counter {
		position:static;
		margin-top:0;
		color:light_gray;
	}

	// Icons only mode
	&_notext {
		.social-likes__button {
			width:1.85em;
		}
		.social-likes__icon {
			margin-left:.1em;
		}
	}

	// Icons only light
	&_notext&_light {
		&,
		.social-likes__widget,
		.social-likes__icon {
			margin:0;
			left:0;
		}
		.social-likes__button {
			width:1.4em;
			padding-left:0;
		}
	}

	// Single button mode
	&_single {
		margin-top:-1.2em;
		padding:margin;
		background:#fff;
		border:1px solid #ddd;
	}
}

// Single button
.social-likes__widget_single {
	height:1.7em;
	margin:0;
	padding:.1em 0;
	line-height:1.5;
	background:#007aff;
	.social-likes_single-light + & {
		color:@background;
	}
}
.social-likes__icon_single {
	left:.4em;
	font-size:1.1em;
}

// Facebook
button-colors('facebook', #3d5b95);
.social-likes__icon_facebook {
	left:.25em;
	top:.05em;
	font-size:1.1em;
	.social-likes_notext & {
		margin-left:.15em;
	}
}

// Twitter
button-colors('twitter', #24aadd);
.social-likes__icon_twitter {
	top:.1em;
	left:.25em;
	.social-likes_light & {
		left:.1em;
	}
}

// Google+
button-colors('plusone', #d23e30);
.social-likes__icon_plusone {
	.social-likes_notext & {
		margin-left:0;
	}
}
.social-likes__icon_plusone {
	left:.25em;
	.social-likes_light & {
		margin-top:0;
	}
}

// Mail.ru
button-colors('mailru', #00468c);
.social-likes__icon_mailru {
	left:.25em;
	.social-likes_light & {
		left:.1em;
	}
	.social-likes_notext & {
		margin-left:.075em;
	}
}

// Vkontakte
button-colors('vkontakte', #587e9f);
.social-likes__icon_vkontakte {
	top:.2em;
	left:.25em;
}

// Odnoklassniki
button-colors('odnoklassniki', #f59310);
.social-likes__icon_odnoklassniki {
	left:.4em;
	.social-likes_light & {
		left:.25em;
	}
}
.social-likes_notext.social-likes_light .social-likes__button_odnoklassniki {
	width:1em;
}

// Pinterest
button-colors('pinterest', #cb132d);
.social-likes__icon_pinterest {
	.social-likes_light & {
		left:.1em;
	}
}