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

.footer-copyright {
	padding: 3rem 0;
	background: var(--alpha-dark-color);
	color: var(--alpha-grey-color);
	text-align: center;
	z-index: 3;
}

@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: -2.857em;
		#{$right}: 1.0714em;
		z-index: 9999;
		width: 3.2857em;
		height: 3.2857em;
		font-size: 1.4rem;
		font-weight: 700;
		color: var(--alpha-change-color-dark-1);
		opacity: 0;
		transition: bottom .3s, opacity .3s;

		&.show {
			opacity: 1;
			bottom: 98px;
		}

		&: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: 3.1429em;
			height: 3.1429em;
			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;
			}
		}
	}
}

@include mq(md, max) {
	#scroll-top {
		display: none;
	}
}

// Sticky Footer
.mobile-icon-bar {
	display: flex;
	transition: margin .4s;

	>* {
		flex: 1;
	}

	.cart-toggle::after {
		content: none;
	}

	.cart-toggle,
	.search-toggle {
		padding: 0;
		color: inherit;
	}

	.dropdown:hover .cart-toggle {
		color: var(--alpha-change-color-dark-1);
	}

	.hs-toggle {
		.input-wrapper {
			position: absolute;
			#{$right}: -1.5rem;
			top: 100%;
			padding: 1.5rem;
			height: 8rem;
			background-color: var(--alpha-white-color);
			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: #f4f4f4;
			padding: 1.0769em 1.5385em;
			font-size: 0.9286em;
			color: var(--alpha-body-color);
		}

		.btn-search {
			background: #f4f4f4;
			min-width: 2.807em;
			color: var(--alpha-dark-color);
		}

		.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: var(--alpha-border-radius-form);
		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-white-color);
		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;
	}

	#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 {
		font-size: 0.7143em;
		line-height: 1;
		letter-spacing: .025em;
		text-transform: uppercase;
	}

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

	.mobile-icon-bar & i {
		width: 1.6429em;
		height: 1.6429em;
		line-height: 1.6429em;
		text-align: center;
		font-size: 1.6429em;
	}

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

// For Fixed Footer
.fixed-footer {

	.main,
	.breadcrumb-wrap,
	.page-header {
		background-color: inherit;
		z-index: 1;
	}

	.footer {
		position: sticky;
		top: auto;
		bottom: 0;
		left: 0;
	}
}

@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;
	}
}