.social-menu {
	font-size: (18em / 13);
}

.search-toggle {
	font-size: (18em * 0.85 / 13)
}


.social-menu {
	@extend %ends--hard;
	margin-left: 1em;
	display: none;

	.search-overlay + & {
		margin-left: 0;
	}

	@include query-above($sidebar-jump) {
		float: left;
		display: block;
	}

	.sub-menu {
		display: none;
	}

	.menu-item {
		line-height: 1 !important;
		white-space: nowrap;
		vertical-align: top;

		> a:hover, > a:focus {
			color: $neutral;

			.is--ie &, .is--ie-le10 & {
				color: white;

				&:before {
					color: $neutral;
				}
			}
		}
	}

	a {
		@extend .color--dark;
		@extend %menu-icon;
		@extend %visibility--hidden;

		transition: color .2s ease-in-out;
		padding: rem(14px) rem(13px);

		.icon-text {
			display: none;
		}

		.is--ie &, .is--ie-le10 & {
			color: transparent;
			visibility: visible;
		}

		&:before {
			@extend %display--block;
			@extend %visibility--visible;
			@extend %pointer-events--auto;
			@extend %fa;

			content: $fa-var-share-alt;

			.is--ie & , .is--ie-le10 & {
				color: black;
			}
		}

		// default share icon used as a fallback
		// now for the social services that are in FA
		// we will match the href to them - left them looser so we don't have complaints
		&[href*="mailto:"]:before,
		&[href*="mail"]:before		  {content: $fa-var-envelope;}
		&[href*="feed"]:before,
		&[href*="rss"]:before		   {content: $fa-var-rss;}
		&[href*="behance"]:before	   {content: $fa-var-behance;}
		&[href*="delicious"]:before	 {content: $fa-var-delicious;}
		&[href*="deviantart"]:before	{content: $fa-var-deviantart;}
		&[href*="digg"]:before		  {content: $fa-var-digg;}
		&[href*="dribbble"]:before	  {content: $fa-var-dribbble;}
		&[href*="facebook"]:before	  {content: $fa-var-facebook;}
		&[href*="flickr"]:before		{content: $fa-var-flickr;}
		&[href*="foursquare"]:before	{content: $fa-var-foursquare;}
		&[href*="github"]:before		{content: $fa-var-github;}
		&[href*="plus.google"]:before   {content: $fa-var-google-plus;}
		&[href*="instagram"]:before	 {content: $fa-var-instagram;}
		&[href*="linkedin"]:before	  {content: $fa-var-linkedin;}
		&[href*="pinterest"]:before	 {content: $fa-var-pinterest;}
		&[href*="reddit"]:before		{content: $fa-var-reddit;}
		&[href*="skype"]:before		 {content: $fa-var-skype;}
		&[href*="soundcloud"]:before	{content: $fa-var-soundcloud;}
		&[href*="spotify"]:before	   {content: $fa-var-spotify;}
		&[href*="stumbleupon"]:before   {content: $fa-var-stumbleupon;}
		&[href*="tumblr"]:before		{content: $fa-var-tumblr;}
		&[href*="twitter"]:before	   {content: $fa-var-twitter;}
		&[href*="vimeo"]:before		 {content: $fa-var-vimeo-square;}
		&[href*="vine"]:before		  {content: $fa-var-vine;}
		&[href*="vk.com"]:before		{content: $fa-var-vk;}
		&[href*="weibo"]:before		 {content: $fa-var-weibo;}
		&[href*="xing"]:before		  {content: $fa-var-xing;}
		&[href*="yahoo"]:before		 {content: $fa-var-yahoo;}
		&[href*="youtube"]:before	   {content: $fa-var-youtube;}
		&[href*="angel.co"]:before	  {content: $fa-var-angellist;}
		&[href*="yelp"]:before		  {content: $fa-var-yelp;}
		&[href*="last.fm"]:before	   {content: $fa-var-lastfm;}
		&[href*="slideshare"]:before	{content: $fa-var-slideshare;}
		&[href*="twitch.tv"]:before	 {content: $fa-var-twitch;}
		&[href*="bloglovin"]:before	 {content: $fa-var-heart;}
		&[href*="#search"]:before	   {content: $fa-var-search;}
		&[href*="medium.com"]:before	{content: $fa-var-medium;}
		&[href*="whatsapp"]:before	  {content: $fa-var-whatsapp;}
		&[href*="leanpub"]:before	   {content: $fa-var-leanpub;}
		&[href*="renren"]:before		{content: $fa-var-renren;}
		&[href*="twitch.tv"]:before	 {content: $fa-var-twitch;}
	}
}

// Mobile menu
li.social-menu-items-mobile {
	@include query-above($sidebar-jump) {
		display: none;
	}

	padding: rem(20px) rem(40px) rem(20px) rem(60px);
	border-bottom: 1px solid $light;

	.social-menu {
		float: none;
		margin-left: 0;
		display: block;

		.menu-item {
			margin-right: 14px;
			white-space: inherit;
		}

		.menu-item a {
			display: block;
			width: 37px;
			height: 46px;
			font-size: rem(24px);
			padding: 7px 0;
			overflow: hidden;
		}
	}
}