@include body-class(true) {

	.sui-footer {
		margin-top: #{$sui-gutter-md * 2};
		color: $footer-color;
		font: $font--medium 12px/22px $font;
		letter-spacing: $font--letter-spacing;
		text-align: center;

		[class*="sui-icon-"] {
			margin: 0 3px;
			font-size: 11px;

			&:before {
				display: block;
				color: $footer-color;
			}
		}

		@include media(min-width, md) {
			margin-top: #{$sui-gutter * 2};
		}
	}

	.sui-footer-nav,
	.sui-footer-social {
		display: flex;
		justify-content: center;
		margin: $sui-gutter-md 0 0;
		text-align: center;

		&, li {
			padding: 0;
			border: 0;
			list-style: none;
		}

		li {
			display: inline-flex;
			margin: 0;
			color: $footer-color;
			font: 400 12px/16px $font;

			a {
				display: block;
				color: $footer-color;
				font-weight: 400;
				transition: $transition;

				[class*="sui-icon-"] {
					width: 30px;
					text-align: center;

					&:before {
						display: block;
						color: inherit;
					}
				}

				&,
				&:hover,
				&:active {
					outline: none;
					box-shadow: none;
				}

				&:hover,
				&:active {
					color: $footer-color-hover;
				}
			}
		}

		@include media(max-width, md) {
			flex-wrap: wrap;
		}

		@include media(min-width, md) {
			margin-top: $sui-gutter;
		}
	}

	.sui-footer-nav {

		li:not(:last-child) {

			&:after {
				content: "/";
				margin-right: 6px;
				margin-left: 6px;
			}
		}
	}

	.sui-footer-social {

		li {
			margin: 0 5px;

			&:first-child {
				margin-left: 0;
			}

			&:last-child {
				margin-right: 0;
			}
		}
	}

	#sui-cross-sell-footer {

		> div {
			width: 100%;
			text-align: center;
			border-bottom: 1px solid $footer-cross-sell-border-color;
			line-height: 0.1em;
			margin: 10px 0 40px;
			> span {
				position: relative;
				color: $footer-cross-sell-icon-color;
				background-color: #f1f1f1;
				padding: 0 30px;
				font-size: 16px;
				top: 8px;
			}
		}

		h3 {
			font-size: 22px;
			font-weight: bold;
			line-height: 30px;
			text-transform: none;
		}
	}

	.sui-cross-sell-modules {
		margin-top: 30px;

		.sui-col-md-4 {

			@media (min-width: 600px) and (max-width: 783px) {
				display: flex;
			}
		}

		[class*="sui-cross-"] {
			min-height: 150px;
			border-radius: $border-radius $border-radius 0 0;
			background-size: cover;
			background-position: center;
			position: relative;

			> span {
				width: 56px;
				height: 56px;
				display: block;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);

				@media (max-width: 600px) {
					z-index: 1;
					top: 45px;
					left: 50%;
					transform: translateX(-50%);
				}
			}

			@media (min-width: 600px) and (max-width: 783px) {
				width: 180px;
				flex: none;
				border-radius: $border-radius 0 0 $border-radius;
			}

			@media (max-width: 600px) {
				height: 80px;
				min-height: auto;
			}
		}

		@if variable-exists(cross-sell-1) {

			@if $cross-sell-1 != '' {

				.sui-cross-1 {

					> span {
						@include background-2x("#{$sui-image-path}plugins-#{$cross-sell-1}-icon", 'png', 50px, 50px, center center, no-repeat);
					}
		
					background-image: url("#{$sui-image-path}plugins-#{$cross-sell-1}.jpg");
				}
			}
		}

		@if variable-exists(cross-sell-2) {

			@if $cross-sell-2 != '' {

				.sui-cross-2 {

					> span {
						@include background-2x("#{$sui-image-path}plugins-#{$cross-sell-2}-icon", 'png', 50px, 50px, center center, no-repeat);
					}
		
					background-image: url("#{$sui-image-path}plugins-#{$cross-sell-2}.jpg");
				}
			}
		}

		@if variable-exists(cross-sell-3) {

			@if $cross-sell-3 != '' {

				.sui-cross-3 {

					> span {
						@include background-2x("#{$sui-image-path}plugins-#{$cross-sell-3}-icon", 'png', 50px, 50px, center center, no-repeat);
					}
		
					background-image: url("#{$sui-image-path}plugins-#{$cross-sell-3}.jpg");
				}
			}
		}

		.sui-box {
			margin-bottom: 0;

			h3 {
				margin-top: 0;
				font-size: 18px;
				line-height: 30px;
				font-weight: 700;
				text-transform: none;

				@media(min-width: 600px) and (max-width: 783px) {
					margin: 0;
					min-height: auto;
				}

				@media(max-width: 600px) {
					min-height: auto;
				}
			}

			.sui-box-body {
				padding: 30px;
				border-radius: 0 0 $border-radius $border-radius;
				text-align: center;

				p {
					margin-bottom: 30px;
					color: $footer-cross-sell-p-color;
					font-size: 13px;
					line-height: 22px;

					@media(min-width: 600px) and (max-width: 783px) {
						margin-bottom: 14px;
					}

					@media(max-width: 600px) {
						margin-bottom: 20px;
					}
				}

				@media(min-width: 600px) and (max-width: 783px) {
					text-align: left;
				}

				@media(max-width: 600px) {
					padding: 26px 20px 20px 20px;
				}
			}

			@media(min-width: 600px) and (max-width: 783px) {
				border-radius: 0 $border-radius $border-radius 0;
			}
		}
	}

	.sui-cross-sell-bottom {
		text-align: center;
		margin-top: 50px;

		h3 {
			font-size: 22px;
			font-weight: bold;
			line-height: 30px;
			text-transform: none;
		}

		p {
			max-width: 500px;
			margin: 20px auto 30px;
		}
		.sui-button {
			margin: 0;
		}

		img {
			display: block;
			height: auto;
			max-width: 100%;
			margin: 30px auto 0;
		}
	}
}

// Remove WordPress footer
@include body-class() {

	#wpfooter {
		display: none;
	}
}