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

// Styles for mobile
.storefront-homepage-contact-section {
	.shcs-wrapper {
		@include clearfix;
		position: relative;
		background-position: center;
		background-repeat: no-repeat;
	}

	.shcs-overlay {
		@include clearfix;
		padding: 2.618em;
	}

	.shcs-contact-details {
		margin-bottom: 1.618em;

		ul {
			list-style-type: none;
			margin: .857em 0 0;

			li {
				position: relative;
				padding: .53em 0 .53em 2.618em;

				&:before {
					content: '\f124';
					font-family: "FontAwesome";
					position: absolute;
					top: 0;
					left: 0;
					line-height: 2.244;
					font-size: 1.2em;
					font-weight: 700;
				}

				&.shcs-phone-number {
					&:before {
						content: '\f095';
					}
				}

				&.shcs-email {
					&:before {
						content: '\f0e0';
					}
				}
			}
		}
	}

	.shcs-contact-form {
		form,
		.contact-submit {
			margin-bottom: 0;
		}

		.contact-form-submission {
			margin: 0;
			padding: 0;
		}
	}
}

.storefront-2-3 {
	.storefront-homepage-contact-section {
		.shcs-contact-details {
			ul {
				li {
					&:before {
						font-family: "Font Awesome 5 Free";
						font-weight: 900;
						content: fa-content( $fa-var-location-arrow );
					}

					&.shcs-phone-number {
						&:before {
							content: fa-content( $fa-var-phone );
						}
					}

					&.shcs-email {
						&:before {
							content: fa-content( $fa-var-envelope );
						}
					}
				}
			}
		}
	}
}

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

	// Styles for desktop
	.storefront-homepage-contact-section {
		@include span(full);

		.shcs-overlay {
			padding: 0;
		}

		.shcs-contact-details,
		.shcs-contact-form {
			padding: gutter();
		}

		.shcs-contact-details {
			@include span(4 of 12 no-gutter wide);
			margin-bottom: 0;
		}

		.shcs-contact-form {
			@include span(last 8 of 12 no-gutter);
		}
	}

}