//Sizes
$ess-font-size: 16px;
$ess-line-height: 1.5em;
$ess-border-radius: 3px;

//Colors
$ess-button-color: #ffffff;
$ess-hover-bg-change: 6%;
$ess-input-bg: $ess-button-color;
$ess-input-color: #222222;

// Social Colors
$sites: facebook #3b5998, twitter #00aced, gplus #dd4b39, pinterest #cb2027, email #999999, link #999999;

// Helper Mixins
@mixin hfa {
	&:hover,
	&:focus,
	&:active {
	  @content;
	}
}

// Base Button Styles
ul.ess-buttons {
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: $ess-font-size;
	line-height: $ess-line-height;
	
	li {
		display: inline-block;
		margin: 0;
	}

	a.ess-button {
		display: inline-block;
		padding-right: 0.25em;
		padding-bottom: 0.5em;
		text-decoration: none;
		border: none;
		box-shadow: none; // Twenty Sixteen Theme fix
	}
}

.ess-button-inner,
.ess-social-count {
	display: inline-block;
	padding: 0.1em 0.6em;
	color: $ess-button-color;
	border-radius: $ess-border-radius;
}

.ess-social-count {
	display: none;

	&.ess-social-count--is-ready {
		display: inline-block;
	}
}

.ess-share-text {
	position: absolute;
	top: -9999px;
	left: -9999px;
}

.ess-buttons--text,
.ess-buttons--count {
	.ess-share-text {
		position: relative;
		top: auto;
		left: auto;
		display: inline-block;
		margin-left: 5px;
	}
}

.ess-icon {
	display: inline-block;
	height: 1em;
	width: 1em;
	fill: $ess-button-color;
	vertical-align: -0.1em;
}

.ess-button {
	&:visited {
		.ess-button-inner,
		.ess-social-count  {
			color: $ess-button-color;
		}
	}
}

@each $site in $sites {
	.ess-button--#{nth($site, 1)} {
		.ess-button-inner,
		.ess-social-count {
			background: nth($site, 2);
		}

		@include hfa {
			.ess-button-inner,
			.ess-social-count {
				background: lighten(nth($site, 2), $ess-hover-bg-change);
			}
		}
	}
}

.ess-button--link {
	@include hfa {
		.ess-share-link-wrap {
			opacity: 1;
			visibility: visible;
		}
	}
}

//Share Media
.ess-image-wrap {
	position: relative;
	display: inline-block;
	width: auto;
	line-height: 0;
	max-width: 100%;

	> a {
		display: inline-block;
		max-width: 100%;
	}

	@include hfa {
		.ess-buttons {
			opacity: 1;
			visibility: visible;
		}
	}

	.ess-buttons {
		position: absolute;
		bottom: 0;
		right: 0;
		left: 0;
		margin-bottom: 0;
		text-align: right;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.2s ease;
	}
}

.ess-share-link-wrap {
	position: absolute;
	bottom: 100%;
	right: 0;
	padding-right: 0.25em;
	padding-bottom: 0.5em;
	width: 60%;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease;
}

.ess-share-link {
	box-sizing: border-box;
	padding: 0.1em 0.6em;
	width: 100%;
	color: $ess-input-color;
	background: $ess-input-bg;
	border: none;
	border-radius: $ess-border-radius;
}