// Social Likes by Artem Sapegin. http://sapegin.github.io/social-likes/
// Birman skin
// Design: Ilya Birman, http://ilyabirman.net/

@import '../base'

bg_color=#fff;
border_color=#ccc;
margin=6px;

hover-button(button, color, text=null) {
	.social-likes__widget_{button} {
		+link-hovers() {
			background:color;
			border-color:color;
			color:text  if text;
			.social-likes__icon_{button} {
				background-image:embedurl('icons/' button '-hover.png');
			}
		}
	}
}

.social-likes {
	min-height:36px;
	margin:(-(margin));
	
	&,
	&_single-w {
		line-height:19px;
	}

	&__widget {
		margin:margin;
		color:#000;
		background:bg_color;
		border:1px solid border_color;
		border-radius:3px;
		line-height:19px;

		+link-hovers() {
			tweak-inverted-text();
			color:#fff;
 			cursor:pointer;
 		}
	}

	&__button,
	&__counter {
		vertical-align:middle;
		font-family:"Helvetica Neue", Arial, sans-serif;
		font-size:13px;
		line-height:20px;
		cursor:inherit;
	}

	&__button {
		padding:1px 6px 1px 20px;
		font-weight:normal;
		border-right:0;
	}

	&__icon {
		width:20px;
		height:18px;
		margin-top:1px;
		background-repeat:no-repeat;
		background-position:50% 50%;
	}

	&__counter {
		min-width:12px;
		padding:1px 4px 1px;
		font-weight:normal;
		text-align:center;
		border-left:1px solid border_color;
	}

	&__widget:hover > &__counter,
	&__widget:focus > &__counter,
	&__widget:active > &__counter,
	&__widget_active > &__counter {
		position:relative;
		border-left-color:transparent;
		&:before {
			content:"";
			position:absolute;
			top:0;
			bottom:0;
			left:-1px;
			// Color: text color with 40% opacity
			border-left:1px solid;
			opacity:.4;
		}
	}

	// Vertical mode
	&_vertical {
		margin:-6px (-(margin));
		
		.social-likes__widget {
			margin:6px margin;
		}
	}

	// Icons only mode
	&_notext {
		margin:-3px;
		
		.social-likes__widget {
			margin:3px;
		}
		.social-likes__button {
			width:18px;
		}
		.social-likes__icon {
			width:100%;
			background-position:center center;
		}
	}

	// Single button mode
	&__widget_single {
		margin:0;
	}
	&_single {
		margin:-12px 0 0;
		padding:4px 0;
		background:#fff;
		border:1px solid border_color;
		border-radius:3px;
	}
	&__single-container {
		width:100%;
		display:table;
	}
	&_single &__widget {
		float:none;
		display:table-row;
		margin:0;
		border:0;
		border-radius:0;
		background:none;
	}
	&_single &__button {
		display:block;  // Not table-cell to fix icons position in FF (position:relative don’t work with display:table-cell)
		padding:2px 6px 2px 24px;
	}
	&_single &__icon {
		margin-left:4px;
		margin-top:2px;
	}
	&_single  &__counter {
		display:table-cell;
		padding:2px 8px 2px 4px;
		border-left:0;
		text-align:right;
	}
	&_single &__widget:hover > &__counter,
	&_single &__widget:focus > &__counter,
	&_single &__widget:active > &__counter {
		&:before {
			display:none;
		}
	}
}


// Single button
.social-likes__icon_single {
	background-image:embedurl('icons/single.png');
}
.social-likes__widget_single:hover,
.social-likes__widget_single:active,
.social-likes__widget_single:focus,
.social-likes__widget_active {
	tweak-inverted-text();
	background:#3673f4;
	border-color:@background;
	color:#fff;
	.social-likes__icon_single {
		background-image:embedurl('icons/single-hover.png');
	}
}

// Facebook
.social-likes__icon_facebook {
	background-image:embedurl('icons/facebook.png');
}
hover-button('facebook', #425497);

// Twitter
.social-likes__icon_twitter {
	background-image:embedurl('icons/twitter.png');
}
hover-button('twitter', #00b7ec);

// Google+
.social-likes__icon_plusone {
	background-image:embedurl('icons/plusone.png');
}
hover-button('plusone', #dd4241);

// Mail.ru
.social-likes__icon_mailru {
	background-image:embedurl('icons/mailru.png');
}
hover-button('mailru', #255896, #ffcd00);

// Vkontakte
.social-likes__icon_vkontakte {
	background-image:embedurl('icons/vkontakte.png');
}
hover-button('vkontakte', #526e8f);

// Odnoklassniki
.social-likes__icon_odnoklassniki {
	background-image:embedurl('icons/odnoklassniki.png');
	background-position:6px 3px;
}
hover-button('odnoklassniki', #f6903b);

// Pinterest
.social-likes__icon_pinterest {
	background-image:embedurl('icons/pinterest.png');
}
hover-button('pinterest', #cc002b);