@import '../../common';


.rs-social-menu {
	ul{
		padding: 0;
		margin: 0;
		display: flex;
		li{
			list-style: none;
			margin: 0 5px;

			i {
				font-size: 16px;
				line-height: 40px;
				transition: $transition;
				color: #000;

				&:hover {
					color: #fff;
				}
			}

			a {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 40px;
				height: 40px;
				border-radius: 50%;
				background: #fff;
				text-align: center;
				transition: $transition;
				box-shadow: 0 5px 4px rgba(0,0,0,.5);
				svg {
					width: 18px;
					height: 18px;
					path {
						transition: $transition;
					}
				}
				&:hover {
					transform: translate(0, -10%);
					border-color: $primaryColor;
					background: $primaryColor;
				}
			}
		}
	}
}

.rs-social-menu.style2 {
	ul{
		li {
			a {
				border: 1px solid #737373;
				background-color: transparent;
				height: auto;
				width: auto;
				font-size: 20px;
				border-radius: 10px;
				padding: 14px 34px 14px;
				margin: 0 0 10px;
				display: inline-flex;
				align-items: center;
				border-radius: 100px;
				transition: all 0.3s ease 0s;
				.social-icon-warap {
					display: inline-flex;
					justify-content: center;
					align-items: center;
					width: 40px;
					height: 40px;
					border-radius: 50%;
					background-color: #ffffff;;
					margin-right: 10px;
					box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
					transition: all 0.3s ease 0s;
					position: absolute;
					left: 20px;
					top: 50%;
					transform: translateY(-50%);
					opacity: 0;
					visibility: hidden;
				}
				.social-hover-text {
					display: inline-block;
					font-size: 16px;
					color: #ffffff;
					line-height: 40px;
					position: relative;
					padding-left: 0;
					transition: all 0.3s ease 0s;
				}
				&:hover{
					transform: translate(0, 0%);
					.social-icon-warap {
						opacity: 1;
						visibility: visible;
					}
					.social-hover-text {
						padding-left: 35px;
					}
				}
			}
		}
	}
}