/*=====================================
=            Sticky Footer            =
=====================================*/

.sticky-footer {
	padding: 0;
	bottom: -200px;
	transition: bottom 0.3s linear;
	position: fixed;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 100;
	background: var(--primary-color);
	color: var(--light-color);
	display: flex;
	justify-content: space-between;
	padding: 15px 0;
	/* Tablet Styles */
	@media (width >= 768px) {
		justify-content: space-around;
	}


	&.make-sticky {
		bottom: 0;
	}

	a {
		color: var(--light-color);
		text-decoration: none;
		transition: color .3s;
		font-size: 17px;
		line-height: 1em;
		font-weight: var(--fw-regular);
		text-transform: uppercase;
		text-align: center;

		&:hover,
		&:active,
		&:focus {
			/* color: rgb(from var(--light-color) r g b / 0.2); */
			color: var(--secondary-color);

			svg {
				path {
					fill: var(--secondary-color);
				}
			}
		}

		svg {
			margin-bottom: 5px;
			path {
				fill: var(--secondary-color);
				transition: fill .3s;
			}
		}
	}

	&>div,
	div.sticky-social,
	&>a.each-button {
		border-left: 1px solid rgb(from var(--light-color) r g b / 0.2);
		display: none;
		flex-basis: 0;
		flex-grow: 1;
		padding-top: 10px;
		padding-bottom: 10px;

		/* Tablet Styles */
		@media (width >= 768px) {
			display: none;
		}

		/* Desktop Styles */
		@media (width >= 1024px) {
			display: flex;
			align-items: center;
		}

		&.mobile-1 {
			@media (width < 768px) {
				border-left: none;
			}
		}

		&.tablet-1 {
			@media (768px <=width < 1024px) {
				border: none;
			}
		}

		&:first-of-type {

			/* Desktop Styles */
			@media (width >= 1024px) {
				border: none;
			}
		}

		&.show-mobile,
		.show-mobile.show-address,
		.show-mobile.show-phone-number {
			@media (width < 768px) {
				display: flex;
				align-items: center;
			}
		}

		&.show-tablet,
		.show-tablet.show-address,
		.show-tablet.show-phone-number {
			@media (768px <=width < 1024px) {
				display: flex;
				align-items: center;
			}
		}
	}

	.sticky-social {
		justify-content: center;
		padding-left: 10px;
		padding-right: 10px;

		.social-label {
			display: none;
			margin-right: 16px;

			/* Tablet Styles */
			@media (width >= 768px) {
				display: none;
			}

			/* Desktop Styles */
			@media (width >= 1024px) {
				display: block;
			}

			&.show-mobile {
				display: block;
			}

			&.show-tablet {

				/* Tablet Styles */
				@media (width >= 768px) {
					display: block;
				}
			}
		}

		.social-icons {
			display: flex;
			align-items: center;
			justify-content: space-between;
			list-style: none;
			margin: 0;

			li:first-of-type {
				svg {
					margin-left: 0;
				}
			}

			li:last-of-type {
				svg {
					margin-right: 0;
				}
			}

			a {
				display: flex;

				&:hover,
				&:active,
				&:focus {
					svg {
						path {
							/* fill: rgb(from var(--light-color) r g b / 0.2); */
							fill: var(--secondary-color);
						}
					}
				}

				svg {
					width: auto;
					height: 20px;
					margin: 0 8px;

					path {
						fill: var(--secondary-color);
						transition: fill .3s;
					}
				}
			}
		}
	}

	.sticky-locations {
		/* padding-left: 10px;
		padding-right: 10px; */
		padding-top: 0;
		padding-bottom: 0;

		flex-grow: 2;
		&.show-address {
			flex-grow: 2.5;
			justify-content: space-around;

			.site-locations .location-each {
				.address-text {
					display: flex;
				}
			}
		}

		&.show-phone-number {
			justify-content: space-around;

			.site-locations .location-each {
				.address-phone {
					display: flex;
				}
			}
		}

		&.show-phone-number.show-address {

			/* flex-grow: 3; */
			.site-locations .location-each {
				.address-text {
					flex-basis: 0;
					flex-grow: 2;
				}

				.phone-text,
				.sms-text {
					flex-basis: 0;
					flex-grow: 1;
				}
			}
		}

		.site-locations {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100%;
			.location-each {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-basis: 0;
				flex-grow: 1;
				margin-right: 8px;
				width: 100%;
				height: 100%;
				&:last-of-type {
					margin-right: 0;
				}

				> div {
					flex-grow: 1;
					flex-basis: 0;
					display: flex;
					height: 100%;
				}

				.show-icon {
					display: flex;
				}

				.address-text {
					display: flex;
					flex-grow: 2;
					text-align: left;
				}

				.phone-text,
				.sms-text {
					display: flex;
					flex-direction: column;
					flex-grow: 1;
					position: relative;
					border-left: 1px solid rgb(from var(--light-color) r g b / 0.2);
				}

				.phone-text {
					&::after {
						content: "Call";
					}
					&.us {
						display: none !important;
					}
				}

				.sms-text {
					&::after {
						content: "Text";
					}
				}
				
				.address-text,
				.phone-text,
				.sms-text {
					/* display: none; */
					align-items: center;
					justify-content: center;
					flex-basis: 0;
					line-height: 1em;
				}

				.address-street,
				.address-city {
					display: inline;
				}
			}
		}
	}

	.sticky-links {
		padding-top: 0;
		padding-bottom: 0;

		.each-button {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-basis: 0;
			flex-grow: 1;
			padding: 4px 10px;
			height: 100%;
			flex-direction: column;

			&:hover,
			&:active,
			&:focus {
				.icon {
					svg {

						path,
						polygon {
							/* fill: rgb(from var(--light-color) r g b / 0.2); */
							fill: var(--secondary-color);
						}
					}
				}
			}

			&.show-mobile {
				@media (width < 768px) {
					justify-content: center;
				}
			}

			&.show-tablet {
				@media (768px <=width < 1024px) {
					justify-content: center;
				}
			}

			.icon {
				display: flex;
				align-items: center;

				svg {
					width: 27px;
					height: auto;
					/* width: auto;
					height: 27px; */
					/* margin-right: 8px; */
					margin-bottom: 8px;

					path,
					polygon {
						fill: var(--secondary-color);
						transition: fill .3s;
					}
				}
			}
		}
	}
}