@import "bourbon";

// Susy
// Susy grid system. See: http://susydocs.oddbird.net/en/latest/
@import "susy";

// Utilities
// Sass tools and helpers used across the project.
@import "../sass/utils/variables";
@import "../sass/utils/mixins";
@import "../sass/vendors/font-awesome/fontawesome";
@import "../sass/vendors/font-awesome/brands";
@import "../sass/vendors/font-awesome/solid";
@import "../sass/vendors/modular-scale";

@mixin sf-fa-icon {

	@include fa-icon;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	line-height: inherit;
	vertical-align: baseline;
}

@mixin sf-fab-icon {

	@include fab-icon;
	font-family: "Font Awesome 5 Brands";
	font-weight: 900;
	line-height: inherit;
	vertical-align: baseline;
}

.site-search {

	.widget_product_search {

		form {

			input[type="search"],
			input[type="text"] {
				padding-left: ms(5);
			}
		}
	}
}

#comments {

	.comment-list {

		.bypostauthor {

			> .comment-body cite a {

				&::after {

					@include sf-fa-icon;
					content: fa-content($fa-var-file-alt);
					margin-left: ms(-3);
				}
			}
		}

		.reply {

			a {

				&::after {

					@include sf-fa-icon;
					content: fa-content($fa-var-reply);
					margin-left: ms(-3);
				}

				&.comment-edit-link {

					&::after {

						@include sf-fa-icon;
						content: fa-content($fa-var-pencil-alt);
					}
				}
			}
		}
	}
}

#respond {

	#cancel-comment-reply-link {

		&::before {

			@include sf-fa-icon;
			content: fa-content($fa-var-times-circle);
			display: block;
		}
	}
}

.sticky {

	.entry-title {

		&::before {

			@include sf-fa-icon;
			content: fa-content($fa-var-thumbtack);
			margin-right: ms(-3);

		}
	}
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.wc-block-grid__products .wc-block-grid__product .wp-block-button__link,
.added_to_cart {

	&.loading {
		position: relative;

		&::after {

			@include sf-fa-icon;
			content: fa-content($fa-var-spinner);
			animation: fa-spin 0.75s linear infinite;
			height: 20px;
			width: 20px;
			line-height: 20px;
			font-size: 20px;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-left: -10px;
			margin-top: -10px;
			display: block;
		}
	}
}

.handheld-navigation {

	ul {

		&.menu {

			li {

				button {

					&::after {

						@include sf-fa-icon;
						content: fa-content($fa-var-angle-down);
					}
				}
			}
		}
	}
}

.site-main {

	nav.navigation {

		.nav-previous {

			a {

				&::before {

					@include sf-fa-icon;
					content: fa-content($fa-var-long-arrow-alt-left);
					margin-right: ms(-3);
				}
			}
		}

		.nav-next {

			a {

				&::after {

					@include sf-fa-icon;
					content: fa-content($fa-var-long-arrow-alt-right);
					margin-left: ms(-3);
				}
			}
		}
	}
}

.widget_search,
.widget_product_search {

	form:not(.wp-block-search) {

		&::before {

			@include sf-fa-icon;
			content: fa-content($fa-var-search);
			position: absolute;
			top: 1em;
			left: 1em;
			line-height: 1;
		}

		input[type="text"],
		input[type="search"] {
			padding-left: ms(5);
		}
	}
}

.storefront-handheld-footer-bar {

	ul {

		li {

			> a {

				&::before {

					@include sf-fa-icon;
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					text-align: center;
					line-height: 2.618046972; // 4.236/1.618
					font-size: ms(3);
					text-indent: 0;
					display: block;
					cursor: pointer;
				}
			}

			&.search {

				> a::before {
					content: fa-content($fa-var-search);
				}
			}

			&.my-account {

				> a::before {
					content: fa-content($fa-var-user);
				}
			}

			&.cart {

				> a::before {
					content: fa-content($fa-var-shopping-basket);
				}
			}
		}
	}
}

.storefront-product-pagination {

	a {

		&[rel="prev"],
		&[rel="next"] {

			&::after {

				@include sf-fa-icon;
			}
		}

		&[rel="prev"] {

			&::after {
				content: fa-content($fa-var-angle-left);
				padding-right: ms(2);
			}
		}

		&[rel="next"] {

			&::after {
				content: fa-content($fa-var-angle-right);
				padding-left: ms(2);
			}
		}
	}
}

.single-product {

	.pswp__button {
		background-color: transparent;
	}

	div.product {

		.woocommerce-product-gallery {

			.woocommerce-product-gallery__trigger {
				text-indent: -999px;
				overflow: hidden;

				&::before {

					@include sf-fa-icon;
					content: fa-content($fa-var-search-plus);
					display: block;
					line-height: 2;
					text-indent: 0;
				}

				img {
					display: none !important;
				}
			}
		}
	}
}

.stock {

	&::before {

		@include sf-fa-icon;
		margin-right: ms(-3);
	}

	&.in-stock {

		&::before {
			content: fa-content($fa-var-smile);
		}
	}

	&.out-of-stock {

		&::before {
			content: fa-content($fa-var-frown);
		}
	}
}

a.reset_variations {

	&::before {

		@include sf-fa-icon;
		content: fa-content($fa-var-sync);
		margin-right: ms(-3);
	}
}

.woocommerce-breadcrumb {

	a {

		&:first-of-type {

			&::before {

				@include sf-fa-icon;
				content: fa-content($fa-var-home);
				margin-right: ms(-3);
			}
		}
	}
}

.widget_recent_entries,
.widget_pages,
.widget_categories,
.widget_archive,
.widget_recent_comments,
.widget_nav_menu,
.widget_links,
.widget_product_categories,
.widget_layered_nav,
.widget_layered_nav_filters {

	ul {
		margin: 0;

		li {
			padding-left: ms(3);

			&::before {

				@include sf-fa-icon;
				margin-right: ms(-3);
				display: block;
				float: left;
				opacity: 0.35;
				margin-left: - ms(3);
				width: 1em;
			}
		}
	}
}

.widget_product_categories {

	ul {

		li {

			&::before {

				@include sf-fa-icon;
				content: fa-content($fa-var-folder);
			}

			&.current-cat {

				&::before {
					content: fa-content($fa-var-folder-open);
				}
			}
		}
	}
}

.widget_layered_nav {

	li {

		&::before {
			content: fa-content($fa-var-square);
		}
	}

	.chosen {

		&::before {
			content: fa-content($fa-var-check-square);
		}
	}
}

.widget_layered_nav_filters {

	ul {

		li {

			&.chosen {

				&::before {
					content: fa-content($fa-var-times);
					color: $error;
					opacity: 1;
				}
			}
		}
	}
}

.widget_recent_entries,
.widget_pages {

	ul {

		li {

			&::before {
				content: fa-content($fa-var-file-alt);
			}
		}
	}
}

.widget_categories {

	ul {

		li {

			&::before {

				@include sf-fa-icon;
				content: fa-content($fa-var-folder);
			}

			&.current-cat {

				&::before {
					content: fa-content($fa-var-folder-open);
				}
			}
		}
	}
}

.widget_archive {

	ul {

		li {

			&::before {
				content: fa-content($fa-var-folder-open);
			}
		}
	}
}

.widget_recent_comments {

	ul {

		li {

			&::before {
				content: fa-content($fa-var-comment);
			}
		}
	}
}

.widget_nav_menu {

	ul {

		li {

			&::before {
				content: fa-content($fa-var-file-alt);
			}
		}
	}
}

.widget_links {

	ul {

		li {

			&::before {
				content: fa-content($fa-var-external-link-alt);
			}
		}
	}
}

a.remove {
	display: block;
	width: ms(3);
	height: ms(3);
	line-height: 1.618;
	font-weight: 400;
	text-indent: -9999px;
	overflow: hidden;
	position: relative;

	&::before {

		@include sf-fa-icon;
		content: fa-content($fa-var-times-circle);
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		color: lighten($color-body, 20%);
		line-height: 1.618;
		text-indent: 0;
		text-align: center;
	}
}

.woocommerce-shipping-calculator {

	> p:first-child {

		a {

			&::before {

				@include sf-fa-icon;
				content: fa-content($fa-var-truck);
				margin-right: ms(-5);
			}
		}
	}
}

.blockUI {

	&::before {

		@include sf-fa-icon;
		content: fa-content($fa-var-spinner);
		animation: fa-spin 0.75s linear infinite;
		height: 30px;
		width: 30px;
		line-height: 30px;
		font-size: 30px;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -15px;
		margin-top: -15px;
	}
}

.wc_request_button_is_disabled {

	.blockUI {
		cursor: not-allowed !important;

		&::before {
			content: none;
		}
	}
}

.woocommerce-pagination {

	.next,
	.prev {
		text-indent: -9999px;
		position: relative;
		overflow: hidden;

		&::after {

			@include sf-fa-icon;
			content: fa-content($fa-var-caret-left);
			text-indent: 0;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translateX(-50%) translateY(-50%);
		}
	}

	.next {

		&::after {
			content: fa-content($fa-var-caret-right);
		}
	}
}

.woocommerce-breadcrumb {

	.breadcrumb-separator {
		text-indent: -9999px;
		position: relative;
		display: inline-block;
		padding: 0 ms(9);

		&::after {

			@include sf-fa-icon;
			content: fa-content($fa-var-angle-right);
			display: block;
			font-size: ms(-1);
			text-indent: 0;
			line-height: initial;
			position: absolute;
			top: 50%;
			left: 50%;
			width: 1em;
			height: 1em;
			transform: translateX(-50%) translateY(-50%);
			text-align: center;
			opacity: 0.25;
		}
	}
}

#payment {

	.payment_methods {

		> .woocommerce-PaymentMethod,
		> .wc_payment_method {

			> label {

				&::before {

					@include sf-fa-icon;
					content: fa-content($fa-var-circle);
					margin-right: ms(-3);
					transition: color, ease, 0.2s;
				}
			}
		}

		li {

			&.woocommerce-PaymentMethod,
			&.wc_payment_method {

				> input[type="radio"]:first-child {

					@include screen-reader-text();

					&:checked + label::before {
						content: fa-content($fa-var-dot-circle);
					}
				}
			}
		}
	}
}

.woocommerce-password-strength {

	&::after {

		@include sf-fa-icon;
		content: fa-content($fa-var-frown);
		margin-left: ms(-3);
	}

	&.strong {

		&::after {
			content: fa-content($fa-var-smile);
		}
	}

	&.good {

		&::after {
			content: fa-content($fa-var-meh);
		}
	}
}

.woocommerce-MyAccount-navigation {

	ul {

		li {

			&.is-active {

				a::before {
					opacity: 1;
				}
			}

			a {

				&::before {

					@include sf-fa-icon;
					content: fa-content($fa-var-file-alt);
					line-height: 1.618;
					margin-left: ms(-3);
					width: ms(2);
					text-align: right;
					float: right;
					opacity: 0.25;
				}

				&:hover {

					&::before {
						opacity: 1;
					}
				}
			}

			&.woocommerce-MyAccount-navigation-link--dashboard a::before {
				content: fa-content($fa-var-tachometer-alt);
			}

			&.woocommerce-MyAccount-navigation-link--orders a::before {
				content: fa-content($fa-var-shopping-basket);
			}

			&.woocommerce-MyAccount-navigation-link--downloads a::before {
				content: fa-content($fa-var-file-archive);
			}

			&.woocommerce-MyAccount-navigation-link--edit-address a::before {
				content: fa-content($fa-var-home);
			}

			&.woocommerce-MyAccount-navigation-link--payment-methods a::before {
				content: fa-content($fa-var-credit-card);
			}

			&.woocommerce-MyAccount-navigation-link--edit-account a::before {
				content: fa-content($fa-var-user);
			}

			&.woocommerce-MyAccount-navigation-link--customer-logout a::before {
				content: fa-content($fa-var-sign-out-alt);
			}

			&.woocommerce-MyAccount-navigation-link--subscriptions a::before {
				content: fa-content($fa-var-sync);
			}
		}
	}
}

.my_account_orders {

	.button.view {

		&::after {

			@include sf-fa-icon;
			content: fa-content($fa-var-eye);
			margin-left: ms(-3);
		}
	}
}

p.order-again {

	.button {

		&::after {

			@include sf-fa-icon;
			content: fa-content($fa-var-sync);
			margin-left: ms(-3);
		}
	}
}

.woocommerce-MyAccount-downloads {

	.button {

		&::after {

			@include sf-fa-icon;
			content: fa-content($fa-var-cloud-download-alt);
			margin-left: ms(-3);
		}
	}
}

.demo_store {

	&::before {

		@include sf-fa-icon;
		content: fa-content($fa-var-info-circle);
		margin-right: ms(-3);
	}
}

.woocommerce-tabs {

	ul.tabs {

		li {

			&::after {

				@include sf-fa-icon;
				content: fa-content($fa-var-angle-down);
				display: block;
				position: absolute;
				top: 50%;
				right: -1em;
				transform: translateY(-50%);
				opacity: 0;
				transition: all, ease, 0.3s;
			}

			&.active {

				&::after {
					opacity: 1;
					right: 0;
				}
			}
		}
	}
}

.wc-forward,
.woocommerce-Button--next {

	&::after {

		@include sf-fa-icon;
		content: fa-content($fa-var-long-arrow-alt-right);
		margin-left: ms(-3);
	}
}

.woocommerce-Button--previous {

	&::before {

		@include sf-fa-icon;
		content: fa-content($fa-var-long-arrow-alt-left);
		margin-right: ms(-3);
	}
}

#reviews {

	.commentlist {

		li {

			p.meta {

				.verified {
					display: inline-block;
					height: ms(2);
					width: ms(2);
					position: relative;
					text-indent: -9999px;

					&::before {

						@include sf-fa-icon;
						content: fa-content($fa-var-check-circle);
						color: $success;
						position: absolute;
						top: 0;
						left: 0;
						width: ms(2);
						height: ms(2);
						text-indent: 0;
						text-align: center;
						line-height: ms(3);
					}
				}
			}
		}
	}
}

/**
 * Composite Products
 */
.single-product div.product {

	.component_selections {

		.clear_component_options::before {

			@include sf-fa-icon;
			content: fa-content($fa-var-sync);
			margin-right: ms(-3);
		}
	}
}

/**
 * Mix and Match
 */
.cart,
.shop_table {

	.mnm_table_item {

		.mnm_table_item_indent {

			&::before {

				@include sf-fa-icon;
				content: fa-content($fa-var-level-up-alt);

				@include fa-icon-rotate(90deg,1);
				margin-right: ms(-4);
				opacity: 0.25;
			}
		}
	}
}

/**
 * Quick view
 */
.quick-view-button {

	&::before {

		@include sf-fa-icon;
		content: fa-content($fa-var-eye);
		margin-right: ms(-2);
	}
}

/**
 * Ship multiple addresses
 */
.woocommerce-page {

	.ship_address,
	.no_shipping_address {

		.gift-form {

			label {

				&::after {

					@include sf-fa-icon;
					content: fa-content($fa-var-gift);
					margin-left: ms(-3);
				}
			}
		}

		.modify-address-button {

			&::before {

				@include sf-fa-icon;
				content: fa-content($fa-var-edit);
				margin-right: ms(-3);
			}
		}
	}

	.addresses {

		+ .addresses {

			header.title {

				a::before {
					content: fa-content($fa-var-plus);
				}
			}
		}
	}
}

/**
 * Product reviews pro
 */
.woocommerce,
.woocommerce-page {

	.woocommerce-MyAccount-navigation {

		li.woocommerce-MyAccount-navigation-link--contributions {

			a::before {

				@include sf-fa-icon;
				content: fa-content($fa-var-star);
			}
		}
	}
}

/**
 * Variation Swatches
 */
a#variations_clear {

	&::before {

		@include sf-fa-icon;
		content: fa-content($fa-var-sync);
		margin-right: ms(-3);
	}
}

/**
 * Wishlists
 */
.wl-add-link {

	&::before {

		@include sf-fa-icon;
		content: fa-content($fa-var-heart);
		margin-right: ms(-3);
	}
}

.button.wl-create-new {

	&::before {

		@include sf-fa-icon;
		content: fa-content($fa-var-plus);
		margin-right: ms(-3);
	}
}

@include susy-media($desktop) {

	.main-navigation {

		ul.menu,
		ul.nav-menu {

			> li {

				&.menu-item-has-children,
				&.page_item_has_children {

					> a {

						&::after {
							// The dropdown indicator
							@include sf-fa-icon;
							content: fa-content($fa-var-angle-down);
							margin-left: 1em;
						}
					}
				}
			}
		}
	}

	.main-navigation {

		ul.menu,
		ul.nav-menu {

			ul {

				li {

					&.menu-item-has-children,
					&.page_item_has_children {

						> a {

							&::after {
								// The dropdown indicator
								@include sf-fa-icon;
								content: fa-content($fa-var-angle-right);
								float: right;
								line-height: 1.618;
							}
						}
					}
				}
			}
		}
	}

	.demo_store {

		a {

			&.woocommerce-store-notice__dismiss-link {

				&::before {

					@include sf-fa-icon;
					content: fa-content($fa-var-times-circle);
					margin-right: ms(-5);
				}
			}
		}
	}

	.site-header-cart {

		.cart-contents {

			&::after {

				@include sf-fa-icon;
				content: fa-content($fa-var-shopping-basket);
				height: 1em;
				float: right;
				line-height: 1.618;
			}
		}
	}

	.addresses {

		header.title {

			a {
				display: block;
				width: 1em;
				height: 1em;
				text-indent: -9999px;
				position: relative;
				padding: ms(-1);
				margin-top: ms(-2);

				&::before {

					@include sf-fa-icon;
					content: fa-content($fa-var-edit);
					line-height: 1.618;
					position: absolute;
					top: 0;
					left: 0;
					height: 100%;
					width: 100%;
					text-align: center;
					text-indent: 0;
				}
			}
		}
	}

	.woocommerce-tabs {

		ul.tabs {

			li {

				&::after {
					content: fa-content($fa-var-angle-right);
				}
			}
		}
	}

	/**
	 * Wishlists
	 */
	#wl-wrapper {

		.wl-tabs {

			> li {

				&.active {

					&::after {

						@include sf-fa-icon;
						content: fa-content($fa-var-angle-right);
						display: block !important;
						position: absolute;
						top: 50%;
						height: 1em;
						width: 1em;
						margin-top: -0.5em;
					}
				}
			}
		}
	}
}
