/*=====================================
=            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(--dark-alt);
	color: var(--light-color);
	display: flex;
	justify-content: space-between;
	letter-spacing: 0.06em;
	text-transform: uppercase;

	/* Tablet Styles */
	@media (width >= 768px) {
		justify-content: space-around;
		padding-left: 40px;
		padding-right: 40px;
	}

	&.make-sticky {
		bottom: 0;
	}

	a {
		color: var(--light-color);
		text-decoration: none;
		transition: color .3s;

		&:hover,
		&:active,
		&:focus {
			color: var(--tertiary-alt);

			svg {
				path {
					fill: var(--tertiary-alt);
				}
			}
		}

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

	&>div,
	div.sticky-social,
	&>a.each-button {
		/* border-left: 1px solid var(--tertiary-alt); */
		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: var(--tertiary-alt);
						}
					}
				}

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

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

	.sticky-locations {
		padding-left: 10px;
		padding-right: 10px;

		&.show-address {
			flex-grow: 1.5;
			justify-content: flex-end;
			padding-right: 0;
			@media (width >= 1280px) {
				flex-grow: 1;
			}

			.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;

			.location-each {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-basis: 0;
				flex-grow: 1;
				margin-right: 8px;

				&:last-of-type {
					margin-right: 0;
				}

				.show-icon {
					display: flex;
					margin-right: 8px;
				}

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

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

				.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.sf-contact-us {
			@media (width >= 768px) {
				justify-content: flex-start;
			}
		}
		.each-button.sf-pay-my-bill {
			@media (width >= 768px) {
				justify-content: flex-end;
			}
			@media (width >= 1024px) {
				justify-content: center;
			}
		}

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

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

						path,
						polygon {
							fill: var(--tertiary-alt);
						}
					}
				}
			}

			&.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: auto;
					height: 20px;
					margin-right: 8px;

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