/* 
    Created on : 09.06.2016, 13:51:16
    Author     : dfd
	Styles for : Widgets Custom: Count mail
*/

.widget_dfd_counter_mail {
	.follow-widget-item {
		.rel();
		height: 37px;
		line-height: 37px;
		margin-bottom: 12px;
		overflow: hidden;
		&:before {
			content: "";
			.abs();
			top: 0;
			right: 0;
			left: 50%;
			height: 100%;
			background: fade(@black-color, 5%);
			border-top-right-radius: 20px;
			border-bottom-right-radius: 20px;
		}
		.color-mask {
			.abs();
			top: 0;
			right: 40%;
			bottom: 0;
			left: 0;
			.rounded(20px);
			.transition(right .3s ease);
		}
		.icon-wrap {
			.rel();
			width: 60%;
			color: @white-color;
			height: 100%;
			z-index: 2;
			padding-left: 35px;
			padding-left: 35px;
			font-family: inherit;
			font-size: inherit;
			font-weight: inherit;
			line-height: inherit;
			text-transform: inherit;
			letter-spacing: inherit;
			font-style: inherit;
			float: left;
			i {
				.abs();
				font-size: 17px;
				left: 15px;
				height: inherit;
				line-height: inherit;
			}
			.number {
				padding-left: 5px;
			}
		}
		a {
			.block();
			.rel();
			.transition(color .3s ease);
			z-index: 1;
		}
		&.facebook {
			.color-mask {
				background: #39579a;
			}
		}
		&.twitter {
			.color-mask {
				background: #1da1f2;
			}
		}
		&.youtube {
			.color-mask {
				background: #e62117;
			}
		}
		&:last-child {
			margin-bottom: 0;
		}
		&:hover {
			.color-mask {
				right: 0;
			}
			a {
				color: @white-color;
			}
		}
	}
}