@import '../../../../themes/storefront/assets/css/sass/utils/mixins';
@import '../../../../themes/storefront/assets/css/sass/utils/variables';
@import '../../../../themes/storefront/assets/css/sass/vendors/font-awesome/variables';

// Styles for mobile
.storefront-product-sharing {
	clear: both;

	ul {
		margin-left: 0;

		li {
			list-style: none;

			a:before {
				font-family: "FontAwesome";
				font-weight: 400;
				margin-right: 1em;
			}

			&.facebook {
				a:before {
					content: "\f230";
					color: #3b5998;
				}
			}

			&.twitter {
				a:before {
					content: "\f081";
					color: #00aced;
				}
			}

			&.pinterest {
				a:before {
					content: "\f0d3";
					color: #cb2027;
				}
			}

			&.email {
				a:before {
					content: "\f199";
				}
			}
		}
	}
}

.storefront-2-3 {
	.storefront-product-sharing {
		ul {
			li {
				a:before {
					font-family: "Font Awesome 5 Brands";
				}

				&.facebook {
					a:before {
						content: fa-content( $fa-var-facebook );
					}
				}

				&.twitter {
					a:before {
						content: fa-content( $fa-var-twitter );
					}
				}

				&.pinterest {
					a:before {
						content: fa-content( $fa-var-pinterest );
					}
				}

				&.email {
					a:before {
						font-weight: 900;
						font-family: "Font Awesome 5 Free";
						content: fa-content( $fa-var-envelope );
					}
				}
			}
		}
	}
}

@media screen and (min-width: 768px) {

	// Styles for desktop
	.storefront-product-sharing {
		padding: 1.618em 0;

		ul {
			@include clearfix;
			margin: 0;

			li {
				width: 25%;
				float: left;
				text-align: center;
				border-right: 1px solid $color_border;

				&:last-child {
					border-right: 0;
				}

				a {
					display: block;

					&:before {
						display: block;
						margin: 0 auto .007em;
						font-size: 2.618em;
						transition: all, ease, .2s;
					}

					&:hover {
						&:before {
							transform: translateY(-.236em);
						}
					}
				}
			}
		}
	}
}