// Social Likes by Artem Sapegin. http://sapegin.github.io/social-likes/

// :link and :visited states of the link.
//
// Example:
//   +link-base()
//     color: #bada55
link-base() {
	&,
	&:link,
	&:visited {
		{block}
	}
}

// :hover, :active and :focus states of the link.
//
// Example:
//   +link-hovers()
//     color: #bada55
link-hovers() {
	&:hover,
	&:active,
	&:focus {
		{block}
	}
}

// Tweak inverted text (light on dark) for OS X.
tweak-inverted-text() {
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}

.social-likes,
.social-likes__widget {
	display:inline-block;
	margin:0;
	padding:0;
	vertical-align:middle !important;
	text-indent:0 !important;
	word-spacing:0 !important;
	text-indent:0 !important;
	list-style:none !important;
}

// Hide buttons until they are loaded
.social-likes {
	opacity:0;
}
.social-likes_visible {
	opacity:1;
	transition:opacity .1s ease-in;
}
.social-likes > * {
	display:inline-block;
	visibility:hidden;
}
.social-likes_vertical > * {
	display:block;
}
.social-likes_visible > * {
	visibility:inherit;
}

.social-likes {
	&__widget {
		display:inline-block;
		position:relative;
		white-space:nowrap;
		// overflow:hidden;
		&:before,
		&:after {
			display:none !important;  // Remove nice bullets
		}
	}
	&_vertical &__widget {
		display:block;
		float:left;
		clear:left;
	}

	&__button,
	&__icon,
	&__counter {
		text-decoration:none;
		text-rendering:optimizeLegibility;
	}

	&__button,
	&__counter {
		display:inline-block;
		margin:0;
		outline:0;
	}

	&__button {
		position:relative;
		cursor:pointer;
		user-select:none;
		
		// Prevent layout breaking without labels
		&:before {
			content:"";
			display:inline-block;
		}
	}

	&__icon {
		position:absolute;
		top:0;
		left:0;
	}

	&__counter {
		display:none;
		position:relative;
		font-weight:normal;
	}
	&_ready &__counter,
	&__counter_single {
		display:inline-block;
	}
	&_ready &__counter_empty {
		display:none;
	}
	
	// Vertical mode
	&_vertical {
		.social-likes__widget {
			display:block;
		}
	}

	// Icons only mode
	&_notext {
		.social-likes__button {
			padding-left:0;
		}
	}

	// Single button mode
	&_single-w {
		position:relative;
		display:inline-block;
	}
	&_single {
		position:absolute;
		text-align:left;
		z-index:99999;
		visibility:hidden;
		opacity:0;
		transition:visibility 0s .11s, opacity .1s ease-in;
		backface-visibility:hidden;
		&.social-likes_opened {
			visibility:visible;
			opacity:1;
			transition:opacity .15s ease-out;
		}
	}
}

// Single button
.social-likes__button_single {
	position:relative;
}