@use "mixins/mixins-master" as *;
@use "mixins/flex" as *;
@use "variables" as *;
.thim-sc-social-links {
	text-align: center;
	.socials {
		margin: 0;
		padding: 0;
		li {
			display: inline-block;
			margin: 0 10px;
			a {
				&[href*="dribbble.com"],
				&[href*="facebook.com"],
				&[href*="flickr.com"],
				&[href*="foursquare.com"],
				&[href*="plus.google.com"],
				&[href*="instagram.com"],
				&[href*="linkedin.com"],
				&[href*="pinterest.com"],
				&[href*="reddit.com"],
				&[href*="tumblr.com"],
				&[href*="twitter.com"],
				&[href*="vimeo.com"],
				&[href*="wordpress.com"],
				&[href*="wordpress.org"],
				&[href*="youtube.com"],
				&[href*="mailto:"],
				&[href*="twitch.tv"],
				&[href$="/feed/"] {
					display: inline-block;
					text-indent: initial;
					font-size: 0;
					float: left;

					&:after {
						@include transition();
						font-family: "Font Awesome 5 Brands";
						font-weight: 400;
						text-indent: 0;
						display: block;
						float: left;
						font-size: 17px;
						line-height: 38px;
						width: 40px;
						height: 40px;
						text-align: center;
						border: 1px solid $border_color;
						@include rounded(50%);
					}
				}

				&[href$="/feed/"] {
					&:after {
						content: "\f09e";
						color: #ff9900;
					}
					&:hover {
						&:after {
							color: #fff;
							border-color: #ff9900;
							background-color: #ff9900;
						}
					}
				}

				&[href*="twitch.tv"] {
					&:after {
						content: "\f1e8";
						color: #6441a5;
					}
					&:hover {
						&:after {
							color: #fff;
							border-color: #6441a5;
							background-color: #6441a5;
						}
					}
				}

				&[href*="mailto:"] {
					&:after {
						content: "\f003";
					}
					&:hover {
						&:after {
							color: #fff;
							border-color: $border_color;
							background-color: $border_color;
						}
					}
				}

				&[href*="youtube.com"] {
					&:after {
						content: "\f16a";
						color: #bb0000;
					}
					&:hover {
						&:after {
							color: #fff;
							border-color: #bb0000;
							background-color: #bb0000;
						}
					}
				}

				&[href*="wordpress.com"],
				&[href*="wordpress.org"] {
					&:after {
						content: "\f19a";
						color: #0073aa;
					}
					&:hover {
						&:after {
							color: #fff;
							border-color: #0073aa;
							background-color: #0073aa;
						}
					}
				}

				&[href*="vimeo.com"] {
					&:after {
						content: "\f194";
						color: #aad450;
					}
					&:hover {
						&:after {
							color: #fff;
							border-color: #aad450;
							background-color: #aad450;
						}
					}
				}

				&[href*="tumblr.com"] {
					&:after {
						content: "\f173";
						color: #32506d;
					}
					&:hover {
						&:after {
							color: #fff;
							border-color: #32506d;
							background-color: #32506d;
						}
					}
				}

				&[href*="reddit.com"] {
					&:after {
						content: "\f231";
					}
					&:hover {
						&:after {
							color: #fff;
							border-color: $border_color;
							background-color: $border_color;
						}
					}
				}

				&[href*="twitter.com"] {
					&:after {
						content: "\e900";
						color: #00aced;
						font-family: "Ionicons" !important;
					}
					&:hover {
						&:after {
							color: #fff;
							border-color: #00aced;
							background-color: #00aced;
						}
					}
				}

				&[href*="dribbble.com"] {
					&:after {
						content: "\f17d";
						color: #ea4c89;
					}
					&:hover {
						&:after {
							color: #fff;
							border-color: #ea4c89;
							background-color: #ea4c89;
						}
					}
				}

				&[href*="facebook.com"] {
					&:after {
						content: "\f09a";
						color: #3b5998;
					}
					&:hover {
						&:after {
							color: #fff;
							border-color: #3b5998;
							background-color: #3b5998;
						}
					}
				}

				&[href*="flickr.com"] {
					&:after {
						content: "\f16e";
						color: #ff0084;
					}
					&:hover {
						&:after {
							color: #fff;
							border-color: #ff0084;
							background-color: #ff0084;
						}
					}
				}

				&[href*="foursquare.com"] {
					&:after {
						content: "\f180";
						color: #0072b1;
					}
					&:hover {
						&:after {
							color: #fff;
							border-color: #0072b1;
							background-color: #0072b1;
						}
					}
				}

				&[href*="plus.google.com"] {
					&:after {
						content: "\f0d5";
						color: #dd4b39;
					}
					&:hover {
						&:after {
							color: #fff;
							border-color: #dd4b39;
							background-color: #dd4b39;
						}
					}
				}

				&[href*="instagram.com"] {
					&:after {
						content: "\f16d";
						color: #517fa4;
					}
					&:hover {
						&:after {
							color: #fff;
							border-color: #517fa4;
							background-color: #517fa4;
						}
					}
				}

				&[href*="linkedin.com"] {
					&:after {
						content: "\f0e1";
						color: #007bb6;
					}
					&:hover {
						&:after {
							color: #fff;
							border-color: #007bb6;
							background-color: #007bb6;
						}
					}
				}

				&[href*="pinterest.com"] {
					&:after {
						content: "\f231";
						color: #cb2027;
					}
					&:hover {
						&:after {
							color: #fff;
							border-color: #cb2027;
							background-color: #cb2027;
						}
					}
				}
			}
		}
	}
}

#thim-header-topbar {
	.thim-sc-social-links {
		.socials {
			li {
				margin: 0 7px;
				&:last-child {
					margin-right: 0;
				}
				a {
					&:after {
						line-height: 34px;
						color: inherit;
						font-size: 14px;
						border: none;
						width: auto;
						height: auto;
						background: none !important;
						@include transition(none);
					}
				}
			}
		}
	}
}