$social-default-color: $color_dark;

//  classname: color
$social-colors: (
	'white': #fff,
	'facebook': #217CEF,
	'twitter': #2AA3EF,
	'pinterest': #e8323f,
	'linkedin': #4477ab,
	'dribbble': #fd629e,
	'github': #24292E,
	'instagram': #383838,
	'dropbox': #187fe7,
	'vk': #6083ab,
	'youtube': #f00,
	'vimeo': #1ab8ea,
	'behance': #0056ff,
	'tumblr': #2a445f,
	'flickr': #0063db,
	'reddit': #ff4501,
	'snapchat': #e0e410,
	'whatsapp': #0ec143,
	'quora': #a82401,
	'vine': #00be8e,
	'digg': #1c5891,
	'foursquare': #FD4577,
	'tiktok': #323131,
	'twitch': #9147ff,
	'mixer': #0270d9,
	'telegram': #0088cc,
	'soundcloud': #FD561F,
	'spotify': #1ED760,
	'teamspeak': #1c82cc,
	'discord': #7289da,
	'kaggle': #32C0FD,
	'medium': #03a87c,
	'xing': #0C6567
);

.socialbar {
	cursor: default;

	a {
		background: $social-default-color;
		color: #fff;
		width: 50px;
		height: 50px;
		margin: 0px 3px 5px;
		border: 1px solid $social-default-color;
		border-radius: 50px;
		text-align: center;
		text-decoration: none;
		vertical-align: middle;
		line-height: 50px;
		font-size: 22px;
		display: inline-block;
		transition: .2s;
		cursor: pointer;
		transition-property: background-color, border-color, color;

		span {
			position: relative;
			z-index: 2;
		}

		&:hover {
			background: transparent;
			color: $social-default-color;
		}

	}

	&.squared {
		a {
			border-radius: 0;
		}
	}
	&.outline a {
		background: transparent;
		border: 1px solid $social-default-color;
		color: $social-default-color;

		&:hover {
			background: $social-default-color;
			color: #ffffff;
		}

		&.social-footer {
			border-color: #474a4e;
			color: #afafb0;

			&:hover {
				background: #474a4e;
				color: #ffffff;
			}
		}
	}
	&.flat {
		a {
			background: transparent;
			color: $social-default-color;
			border-color: transparent;

			&:hover {
				background: $social-default-color;
				color: #ffffff;
			}
		}
		&.outline-hover a:hover {
			background: transparent;
			border-color: $social-default-color;
			color: $social-default-color;
		}
	}

	&.inline {
		display: block;

		a {
			background: none;
			width: auto;
			height: auto;
			border: none;
			margin: 0 15px;
			box-shadow: none;
			color: $color_dark;
			line-height: 2.4;
			font-size: $font_extra_small-size;
			font-weight: 600;
			font-family: $font_titles;

			.icon {
				font-size: 20px;
				margin-right: 5px;
				vertical-align: -2px;
			}
		}
	}

	&.small {
		a {	
			width: 40px;
			height: 40px;
			line-height: 40px;
			font-size: $font_main-size;
		}

		&.inline a {
			width: auto;
			height: auto;
			margin: 0 10px;
			line-height: 2.4;
			font-size: $font_extra_small-size;

			.icon {
				font-size: $font_main-size;
				vertical-align: -1px;
			}
		}
	}

	a {
		&:first-child {
			margin-left: 0;
		}
		&:last-child {
			margin-right: 0;
		}
	}

	// Default colors
	@each $name, $color in $social-colors {
		&.default {
			a.#{$name} {
				background: $color;
				border-color: $color;

				&:hover {
					background: transparent;
					color: $color;
					border-color: $color;
				}
			}

			&.outline a.#{$name} {
				background: transparent;
				color: $color;

				&:hover {
					background: $color;
					color: #ffffff;
				}
			}

			&.flat a.#{$name} {
				background: transparent;
				color: $color;
				border-color: transparent;

				&:hover {
					background: $color;
					color: #ffffff;
				}
			}

			&.inline a.#{$name} {
				background: transparent;
				border-color: transparent;
				color: $color;

				&:hover {
					color: $color;
				}
			}
		}
	}
	@each $name, $color in $social-colors {
		&.hover-default {
			a.#{$name}:hover {
				background: transparent;
				color: $color;
				border-color: $color;
			}

			&.outline a.#{$name}:hover {
				background: $color;
				color: #ffffff;
			}

			&.flat a.#{$name}:hover {
				background: $color;
				color: #ffffff;
			}

			&.inline a.#{$name}:hover {
				color: $color;
			}

			&.inline a.#{$name}:before {
				background-color: $color;
			}
		}
	}

	&.brand {
		a {
			background: $color_brand;
			border-color: $color_brand;

			&:hover {
				background: transparent;
				color: $color_brand;
			}
		}

		&.outline a {
			background: transparent;
			color: $color_brand;

			&:hover {
				background: $color_brand;
				color: #ffffff;
			}
		}

		&.flat a {
			background: transparent;
			color: $color_brand;
			border-color: transparent;

			&:hover {
				background: $color_brand;
				color: #ffffff;
			}
		}

		&.inline a {
			background: transparent;
			border-color: transparent;
			color: $color_dark;

			&:hover {
				color: $color_brand;
			}
		}
	}
}

.socialbar.boxed {
	$sizes: ( 1: 100%, 2: 50%, 3: 33.333%, 4: 25%, 5: 20%, 6: 16.666%, 7: 14.285%, 8: 12.5%, 9: 11.11%, 10: 10%);
	margin: 0;
	overflow: hidden;
	@each $column, $width in $sizes {
		&.social-column-#{$column} {
			a {
				width: $width;
			}
		}
	}

	a {
		height: 100px;
		float: left;
		margin: 0;
		border: none;
		border-radius: 0;
		line-height: 100px;
		vertical-align: middle;
		position: relative;
		overflow: hidden;

		i {
			width: 100%;
			text-align: center;
			position: absolute;
			opacity: 0;
			top: 60%;
			left: 0;
			transition: .2s ease-in-out;
			transition-property: opacity, top;
		}

		.social-text {
			font-family: $font_titles;
			font-size: 15px;
			font-weight: 600;
			position: relative;
			top: 0;
			opacity: 1;
			transition: .2s ease-in-out;
			transition-property: opacity, top;
		}

		&:hover {
			i {
				opacity: 1;
				top: 40%;
			}

			.social-text {
				opacity: 0;
				top: -30px;
			}
		}

		@each $name, $color in $social-colors {
			&.default {
				a.#{$name} {
					background: $color;
					border-color: $color;

					&:hover {
						background: $color;
						color: #ffffff;
					}
				}
			}
		}
	}

	@media screen and (max-width: 768px) {
		clear: both;

		a {
			height: 60px;
			line-height: 60px;
			clear: none;

			.social-text {
				display: none;
			}

			.icon {
				opacity: 1;
				position: static;
			}
		}
	}
}

@keyframes toTopFromBottom {
	59% {
		transform: translateY(-90%);
	}
	60% {
		opacity: 0;
		transform: translateY(100%);
	}
	61% {
		opacity: 1;
	}
}