/* -------------------------------------------
	Footer
		- Default Footer
		- Scroll Top
		- Sticky Footer
---------------------------------------------- */

.footer-parallax {
	z-index: 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
}


@include mq(md) {
	.addtocart-fixed .footer {
		padding-bottom: 125px;
	}
}

// ScrollTop 
@include mq(md) {
	#scroll-top {
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: center;
		bottom: -4rem;
		right: 1.5rem;
		z-index: 9999;
		width: 4.6rem;
		height: 4.6rem;
		font-size: 1.4rem;
		font-weight: 700;
		color: var(--alpha-dark-color);
		opacity: 0;
		transition: bottom .3s, opacity .3s;

		&.show {
			opacity: 1;
			bottom: 110px;
		}
		&:focus, &:hover {
			text-decoration: none;
		}
		&:hover {
			opacity: .8;
		}
		i {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 3.6rem;
			height: 3.6rem;
			color: var(--alpha-white-color);
			background-color: var(--alpha-dark-color);
    		border: 2px solid var(--alpha-dark-color);
			border-radius: 50%;
			z-index: 1;
		}
		svg {
			position: absolute;
			width: 44px;
			height: 44px;
			border-radius: 50%;
			top: 1px;
			left: 1px;
			z-index: -1;
			circle {
				stroke: var(--alpha-primary-color);
				stroke-width: 4px;
				stroke-linecap: round;
				stroke-dasharray: 1, 400;
			}
		}
		// #progress-indicator {
		// 	stroke-dasharray: 1, 138;
		// }
	}
}
@include mq(md, max) {
	#scroll-top {
		display: none;
	}
}


// Sticky Footer
@if use(mobile-bar) {
	.mobile-icon-bar {
		display: flex;
		transition: margin .4s;

		> * {
			flex: 1;
		}
		.cart-toggle,
		.search-toggle {
			padding: 0;
			color: inherit;
		}
		.dropdown:hover .cart-toggle {
            color: var(--alpha-change-color-dark-1);
        }

		@if (use(mobile-bar-search)) {
			.hs-toggle {
				.input-wrapper {
					position: absolute;
					#{$right}: -1.5rem;
					top: 100%;
					padding: 1.5rem;
					height: 8rem;
					background-color: var(--alpha-change-color-light-1);
					box-shadow: 0 3px 35px rgba(0,0,0,0.1);
					visibility: hidden;
					opacity: 0;
					transform: translate3d(0, -10px, 0);
					z-index: 1002;
					transition: transform .4s .2s, visibility .4s .2s, opacity .4s .2s;
					min-width: 54rem;
				}
				.form-control {
					border: 0;
					background: var(--alpha-change-color-light-2);
					padding: 1.4rem 2rem;
					font-size: 13px;
					color: var(--alpha-dark-body-color);
				}
				.btn-search {
					background: var(--alpha-change-color-light-2);
					min-width: 50px;
					font-size: 1.8rem;
					color: var(--alpha-change-color-dark-1);
				}
				.untouchable &:hover,
				&.show {
					.input-wrapper {
						transform: translate3d(0, 0, 0);
						visibility: visible;
						transition: transform .4s;
						opacity: 1;
					}
				}
				&:hover {
					color: var(--alpha-primary-color);
				}
				.search-right + .input-wrapper {
					#{$right}: auto;
				}
			}
			.hs-toggle .input-wrapper {
				top: initial;
				bottom: 100%;
				#{$right}: 1.5rem;
				margin-bottom: 2rem;
				border-radius: $corner-sm;
				transform: translate3d(0, 10px, 0);
				min-width: 29rem;
			}

			.search-toggle:after {
				content: "";
				position: absolute;
				z-index: 1005;
				left: 50%;
				transform: translate(-50%, -5px);
				bottom: 100%;
				border: 11px solid transparent;
				border-top: 11px solid var(--alpha-change-color-light-1);
				visibility: hidden; 
				opacity: 0;
				transition: transform .4s .2s, visibility .4s .2s, opacity .4s .2s;
			}
			
			.untouchable & .search-wrapper:hover > .search-toggle:after,
			.show > .search-toggle:after {
				visibility: visible; 
				opacity: 1;
				transform: translate(-50%, -15px);
				transition: transform .4s;
			}

			.live-search-list {
				margin-bottom: 3px;
				top: initial;
				bottom: 100%;
			}
		}

		.hs-toggle .input-wrapper:after {
			content: '';
			position: absolute;
			left: 0;
			right: 0;
			top: 100%;
			height: 20px;
		}

		.mmenu-active & {
			transition: margin .4s !important;
			margin-#{$left}: 296px;
			margin-#{$right}: -296px;
		}

		#scroll-top {
			position: static;
			display: flex;
			background: none;
			color: inherit;
		}
		&:not(.fixed) {
			.input-wrapper, .search-toggle:after {
				display: none;
			}
		}
	}

	.mobile-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: side-values(1.5rem 0 1.3rem);

		span {
			margin-top: .8rem;
			font-size: 1rem;
			line-height: 1;
			letter-spacing: .025em;
			text-transform: uppercase;
		}

		&.compare-open span {
			margin-#{$left}: 0;
		}

		.mobile-icon-bar & i {
			width: 23px;
			height: 24px;
			line-height: 24px;
			text-align: center;
			font-size: 23px;
			line-height: 1;
		}

		.dropdown &::after {
			content: none;
		}

		&:hover,
		&.active {
			color: var(--alpha-change-color-dark-1);
		}
	}

	@include mq(xs, max) {
		.items-6, .items-7 {
			span {
				display: none;
			}
		}
	}

	@include mq(sm) {
		.mobile-icon-bar {
			padding: 0 4rem;
		}
	}

	@include mq(md) {
		.mobile-icon-bar {
			display: none;
		}
	}
}