// bg colors
$background-light-primary-color: #3283e3;

// custom sizings
$search-bar-height: 34px;
$header-address-width: 590px;
$mobile-header-height: 100px;

// faded header
$header-faded-height: 117px;
$header-faded-links-height: 28px;
$header-faded-placement-offset: -60px;
$header-faded-input-alignment: -116px;
$header-faded-container-offset: -172px;
$header-faded-animation-duration: 300ms;

@keyframes animation-focus-header-in {
	0% {
		opacity: 0;
		transform: translateY($header-faded-container-offset);
	}
	1% {
		opacity: 0.01;
		transform: translateY($header-faded-input-alignment);
	}
	100% {
		opacity: 1;
		transform: translateY($header-faded-placement-offset);
	}
}

@keyframes animation-focus-header-out {
	0% {
		opacity: 1;
		transform: translateY($header-faded-placement-offset);
	}
	99% {
		opacity: 0.01;
		transform: translateY($header-faded-input-alignment);
	}
	100% {
		opacity: 0;
		transform: translateY($header-faded-container-offset);
	}
}

@keyframes animation-focus-overlay-in {
	0% {
		height: 0;
		background-color: rgba(0, 0, 0, 0);
	}
	1% {
		height: 100vh;
		background-color: rgba(0, 0, 0, 0);
	}
	100% {
		height: 100vh;
		background-color: $dark-overlay;
	}
}

@keyframes animation-focus-overlay-out {
	0% {
		height: 100vh;
		background-color: $dark-overlay;
	}
	99% {
		height: 100vh;
		background-color: rgba(0, 0, 0, 0);
	}
	100% {
		height: 0;
		background-color: rgba(0, 0, 0, 0);
	}
}

@mixin headerAllCarts {
	.AllCarts {
		display: none;

		@media (min-width: $site-width-small) {
			display: block;
		}
	}

	.AllCarts__handle {
		background: transparent;
		border: none;
		position: relative;
		padding: 7px 0 0 0 !important;
		display: inherit;
		height: $header-height;
		transform: translateZ(0);

		@include tablet-only {
			top: 3px;
		}

		&--tablet {
			display: none;
		}

		@media (min-width: $site-width-small) {
			&--mobile {
				display: none;
			}

			&--tablet {
				display: block;
			}
		}

		&:focus,
		&:hover,
		&:active {
			outline: none;
			text-decoration: none;
		}

		&__icon {
			font-size: 30px;

			&--blue,
			&--custom-site {
				font-size: 30px;
			}

			&--blue {
				color: $blue-secondary;
			}

			&--custom-site {
				color: $primary-color;
			}

			&--custom-site.multi-bag,
			&.multi-bag {
				font-size: 35px;
			}

			&__animation-container {
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				bottom: 3px;
				right: 0;
				width: 28px;

				@media (max-width: $site-width-small-portrait) {
					bottom: 0;
					top: 6px;
					right: 2px;
				}
			}

			&--custom-site {
				.background-bag--blue::before,
				.foreground-bag--blue::before {
					color: $primary-color;
				}
			}
		}

		&__icon,
		&__icon--blue {
			&.background-animate {
				position: absolute;
				top: 0;
				animation: scale-out-in .2s ease-out .3s;
			}
		}

		&__icon,
		&__icon--blue {
			&.foreground-animate {
				animation: multi-bag-foreground-animation .5s ease-out;
				animation-fill-mode: forwards;
			}
		}

		&__badge,
		&__badge--white {
			position: absolute;
			top: 18px;
			right: 1px;
			width: 100%;
			text-align: center;
			line-height: 22px;
			font-size: 12px;
			font-weight: bold;

			&.multi-bag-badge {
				@extend .AllCarts__handle__badge;
				top: 16px;
				right: $gutter-small;
				left: 3px;

				@media (min-width: $site-width-mobile-medium) {
					right: 0;
				}
			}
		}

		&__badge,
		&__badge.multi-bag-badge{
			color: $primary-color;
		}

		&__badge--white,
		&__badge--white.multi-bag-badge{
			color: white;
		}
	}

	.AllCarts {
		position: absolute;
		right: -$gutter-large;
		top: $header-height;
		width: 360px;
		background: $modal-page-background;
		box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);

		@media (max-width: $site-width-small-portrait) {
			right: -$gutter-small;
		}

		/*Slightly larger than $site-width-mobile-new, this is iPhone 6 width?*/
		@media (max-width: 375px) {
			width: 100vw;
			right: -$gutter;
		}
	}
}