Current File : /home/kelaby89/cartel.express/wp-content/plugins/trx_addons/addons/image-scroll/image-scroll.scss

@import "../../css/_mixins.scss";
@import "../../css/_trx_addons.vars.scss";


/* Image scroll */
:root {
	--trx-addons-image-scroll-duration: 3s;
	--trx-addons-image-scroll-start-pos: 0;
	--trx-addons-image-scroll-width: 370px;
	--trx-addons-image-scroll-height: 200px;
}
[class*="trx_addons_image_scroll_direction_"] {
	&:has(>img),
	.elementor-image {
		overflow: hidden;
		max-height: var(--trx-addons-image-scroll-height);

		img {
			max-width: none;
			@include transition(transform var(--trx-addons-image-scroll-duration) ease-in-out);
		}
	}

	&.trx_addons_image_scroll_event_wheel {
		--trx-addons-image-scroll-start-pos: 0;

		.elementor-widget-container {
			overflow: hidden;
			width: 100%;
		}
		.elementor-image {
			overflow-x: hidden;
			overflow-y: scroll;
			margin-right: -16px;
		}
	}

	&.trx_addons_image_scroll_direction_up {
		.elementor-image img {
			width: 100%;
			@include translateY(var(--trx-addons-image-scroll-start-pos));
		}
		&.trx_addons_image_scroll_event_hover:hover .elementor-image img {
			@include translateY(calc( -100% + var(--trx-addons-image-scroll-height) ));
		}
	}

	&.trx_addons_image_scroll_direction_down {
		.elementor-image img {
			width: 100%;
			@include translateY(calc( -100% + var(--trx-addons-image-scroll-start-pos) + var(--trx-addons-image-scroll-height) ));
		}
		&.trx_addons_image_scroll_event_hover:hover .elementor-image img {
			@include translateY(0);
		}
	}

	&.trx_addons_image_scroll_direction_left {
		.elementor-image img {
			width: auto;
			max-height: var(--trx-addons-image-scroll-height);
			@include translateX(var(--trx-addons-image-scroll-start-pos));
		}
		&:hover .elementor-image img {
			@include translateX(calc( -100% + var(--trx-addons-image-scroll-width) ));
		}
	}

	&.trx_addons_image_scroll_direction_right {
		.elementor-image img {
			width: auto;
			max-height: var(--trx-addons-image-scroll-height);
			@include translateX(calc( -100% + var(--trx-addons-image-scroll-start-pos) + var(--trx-addons-image-scroll-width) ));
		}
		&:hover .elementor-image img {
			@include translateX(0);
		}
	}

}