// Ridiculously Responsive Social Sharing Buttons
// Team: @dbox, @seagoat
// Site: http://www.kurtnoble.com/labs/rrssb
// Twitter: @therealkni

//        ___           ___
//       /__/|         /__/\        ___
//      |  |:|         \  \:\      /  /\
//      |  |:|          \  \:\    /  /:/
//    __|  |:|      _____\__\:\  /__/::\
//   /__/\_|:|____ /__/::::::::\ \__\/\:\__
//   \  \:\/:::::/ \  \:\~~\~~\/    \  \:\/\
//    \  \::/~~~~   \  \:\  ~~~      \__\::/
//     \  \:\        \  \:\          /__/:/
//      \  \:\        \  \:\         \__\/
//       \__\/         \__\/


// How to use: Add/remove buttons from config settings and $social-list.

// config settings
$rrssb-txt: #fff !default;
$rrssb-email: #0a88ff !default;
$rrssb-facebook: #306199 !default;
$rrssb-tumblr: #32506d !default;
$rrssb-linkedin: #007bb6 !default;
$rrssb-twitter: #26c4f1 !default;
$rrssb-googleplus: #e93f2e !default;
$rrssb-reddit: #8bbbe3 !default;
$rrssb-youtube: #df1c31 !default;
$rrssb-pinterest: #b81621 !default;
$rrssb-pocket: #ED4054 !default;
$rrssb-github: #444 !default;

$rrssb-border-radius: 2px !default;

$rrssb-main-font: "Helvetica Neue", Helvetica, Arial, sans-serif !default;

// Variable list for all social button colors to be iterated over. 
$social-list: (
	email			$rrssb-email,
	facebook		$rrssb-facebook,
	tumblr			$rrssb-tumblr,
	linkedin		$rrssb-linkedin,
	twitter			$rrssb-twitter,
	googleplus		$rrssb-googleplus,
	youtube			$rrssb-youtube,
	reddit			$rrssb-reddit,
	pinterest		$rrssb-pinterest,
	pocket			$rrssb-pocket,
	github			$rrssb-github
);

@mixin transition($expression) {
	-webkit-transition: $expression;
	-moz-transition: $expression;
	-o-transition: $expression;
	transition: $expression;
}

%backface-visibility {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
}

%border-box {
	-moz-box-sizing:border-box;
	box-sizing: border-box;
}

// some generic classes
.clearfix {
	*zoom: 1;

	&:after {
		clear: both;
	}

	&:before,
	&:after {
		content: " ";
		display: table;
	}
}

// the meat and potatoes
.rrssb-buttons {
	@extend %border-box;
	font-family: $rrssb-main-font;
	height: 36px;
	margin: 0;
	padding: 0;
	width: 100%;

	li {
		@extend %border-box;
		float: left;
		height: 100%;
		list-style: none;
		margin: 0;
		padding: 0 2.5px;
		line-height: 13px;

		// This generates individual button classes for each item in social list on line 39.
		@each $s-name in $social-list {

			&.#{nth($s-name, 1)} {
				a {
					background-color: nth($s-name, 2);

					&:hover {
						background-color: darken(nth($s-name, 2), 10%);
					}
				}
			}

		} // end @each directive

		a {
			@extend %border-box;
			background-color: #ccc;
			border-radius: $rrssb-border-radius;
			display: block;
			font-size: 11px;
			font-weight: bold;
			height: 100%;
			padding: 11px 7px 12px 27px;
			position: relative;
			text-align: center;
			text-decoration: none;
			text-transform: uppercase;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
			width: 100%;
			@include transition(background-color 0.2s ease-in-out);

			.icon {
				display: block;
				height: 100%;
				left: 10px;
				padding-top: 9px;
				position: absolute;
				top: 0;
				width: 10%;

				svg {
					height: 17px;
					width: 17px;

					path, polygon {
						fill: $rrssb-txt;
					}
				}
			}

			.text {
				color: $rrssb-txt;
			}

			&:active {
				box-shadow:inset 1px 3px 15px 0 rgba(022,0,0,.25);
			}
		}

		&.small {
			a {
				padding: 0;

				.icon {
					height: 100%;
					left: auto;
					margin: 0 auto;
					overflow: hidden;
					position: relative;
					top: auto;
					width: 100%;
				}
				.text {
					visibility: hidden;
				}
			}
		}
	}

	&.large-format {
		height: auto;

		li {
			height: auto;

			a {
				font-size: 15px; // fallback
				font-size: 1vw;  // scales font with browser
				padding: 7% 0% 7% 12%;
				border-radius: 0.2em;
				line-height: 1vw;
				@extend %backface-visibility;

				.icon {
					left: 7%;
					padding-top: 0;
					width: 12%;

					svg {
						height: 100%;
						width: 100%;
					}
				}

				.text {
					font-size: 15px;
					font-size: 1vw; 
					@extend %backface-visibility;
				}

				&:hover {
					font-size: 15px;
					font-size: 1vw; 
					padding: 7% 0% 7% 12%;
					border-radius: 0.2em;
				}
			}
		}
	}

	&.small-format {
		padding-top: 5px;

		li {
			height: 80%;
			padding: 0 1.5px;

			a {
				.icon {
					height: 100%;
					padding-top: 0;

					svg {
						height: 48%;
						position: relative;
						top: 6px;
						width: 80%;
					}
				}
			}
		}
	}
	&.tiny-format {
		height: 22px;
		position: relative;

		li {
			padding-right: 7px;

			a {
				background-color: transparent;
				padding: 0;

				.icon {
					svg {
						height: 70%;
						width: 100%;
					}
				}

				&:hover, &:active {
					background-color: transparent;
				}
			}

			// This generates individual button classes for each item in social list on line 39.
			@each $s-name in $social-list {

				&.#{nth($s-name, 1)} {
					a {
						.icon {
							svg {
								path, polygon {
									fill: nth($s-name, 2);
								}
							}

							&:hover {
								.icon {
									svg {
										path, polygon {
											fill: darken(nth($s-name, 2), 20%);
										}
									}
								}
							}
						}
					}
				}

			}  // end @each directive

		}
	}
}