.compare {

	&-container {
		box-sizing: content-box;
		z-index: 0;
		overflow: hidden;
		position: relative;

		img {
			width: 100%;
			height: auto;
			position: absolute;
			top: 0;
			display: block;
		}

		.compare-before {
			z-index: 2;
		}

		.compare-after {
			z-index: 1;
		}

		&.active {

			.compare-overlay,
			:hover.compare-overlay {
				background: transparent;

				.compare-before-label,
				.compare-after-label {
					opacity: 0;
				}
			}
		}

		.compare-before-label,
		.compare-after-label {
			opacity: 0;

			&::before {
				content: attr(data-content);
			}
		}
	}
	
	&-handle {
		z-index: 40;

		@include centered;

		&::before,
		&::after {
			content: "";
			display: block;
			background: $color-white;
			position: absolute;
			z-index: 30;
			width: 0.125em;
			height: 9999px;
			margin-left: -0.0625em;
			left: 50%;
		}

		&::before {
			bottom: 50%;
    		margin-bottom: 1.7em;
		}

		&::after {
			top: 50%;
    		margin-top: 1.7em;
		}
	}

	&-overlay {
		background: transparent;
		z-index: 3;

		@include transition;

		&,
		.compare-before-label,
		.compare-after-label {
			position: absolute;
			top: 0;
			width: 100%;
			height: 100%;

			@include transition;
		}

		.compare-before-label,
		.compare-after-label {
			transition-property: opacity;
			

			&::before {
				color: $color-white;
				position: absolute;
				background-color: $color-black-light;
				font-size: $font-size-caption;
				font-weight: 600;
				padding: 0.15rem 0.5rem;
				top: 50%;
				transform: translateY(-50%) rotate(-90deg);

				@include border-radius($radius-small);
			}
		}

		.compare-before-label {

			&::before {
				left: 1rem;
			}
		}

		.compare-after-label {

			&::before {
				right: 1rem;
			}
		}

		&:hover {
			background: rgba($color-black, 0.25);

			.compare-after-label,
			.compare-before-label {
				opacity: 1;
			}
		}
	}

	.icon-button {
		background-color: $color-grey-lighter;
		padding: 0;

		.icon {
			width: 100%;
			height: 100%;
			background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAyNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC44OCAxMi4zNjY3TDMuMzYgN0w4Ljg4IDEuNjMzMzNMNy4yIDBMMCA3TDcuMiAxNEw4Ljg4IDEyLjM2NjdaTTE1LjEyIDEyLjM2NjdMMjAuNjQgN0wxNS4xMiAxLjYzMzMzTDE2LjggMEwyNCA3TDE2LjggMTRMMTUuMTIgMTIuMzY2N1oiIGZpbGw9IiMxQjFCMjgiLz48L3N2Zz4=");
			background-position: center;
			background-repeat: no-repeat;
		}
	}
}

.compare-vertical {

	.compare {

		&-handle {
			transform: translate(-50%, -50%) rotate(90deg);
		}

		&-before-label,
		&-after-label {

			&::before {
				content: attr(data-content);
				transform: translateX(-50%);
				left: 50%;
				right: auto;
			}
		}

		&-before-label {

			&::before {
				top: 1rem;
				bottom: auto;
			}
		}

		&-after-label {

			&::before {
				top: auto;
				bottom: 1rem;
			}
		}
	}
}

// WPBakery/Elementor overrides

.compare-wrapper,
.elementor-widget-ohio_compare .elementor-widget-container {
	overflow: hidden;
}