$content-top-bottom-padding: 10%;

.qodef-vertical-split-slider--init {
	height: 100vh !important;
	margin: 0;
	overflow: hidden;
	padding: 0;

	@at-root .admin-bar#{&} {
		margin-top: 32px;
		height: calc(100vh - 32px) !important;
	}

	.qodef-vertical-split-slider {
		visibility: visible;
	}
}

.qodef-vertical-split-slider {
	height: 100vh;
	position: relative;
	visibility: hidden;

	@at-root .admin-bar & {
		height: calc(100vh - 32px);
	}

	.ms {

		&-right {
			right: 0 !important; // remove 1px added inline by script
		}

		&-tableCell {
			height: calc(100vh - (2 * #{$content-top-bottom-padding})) !important; // to override inline from js and make sure it will be full height

			@at-root .admin-bar & {
				height: calc(100vh - (2 * #{$content-top-bottom-padding}) - 32px) !important; // to override inline from js and make sure it will be full height
			}
		}
	}

	&-responsive {
		display: none;
	}
}

.qodef-vertical-split-slider,
.qodef-vertical-split-slider-responsive {
	$label-size: 200px;

	.qodef-m {

		&-slide {

			&-image {
				background-position: center;
				background-size: cover;
				position: relative;
			}

			&-content {
				padding: $content-top-bottom-padding 24%;
				position: relative;

				> div {

					> *:not(.qodef-m-image) {
						position: relative;
						z-index: 1;
					}
				}
			}
		}

		&-label-holder {
			bottom: 0;
			display: block;
			height: $label-size;
			overflow: hidden;
			position: absolute;
			width: $label-size;
		}

		&-label {
			background-color: $background-color;
			display: flex;
			flex-direction: column;
			height: 100%;
			justify-content: space-between;
			padding: 30px 80px 40px 40px;
			width: 100%;

			&-counter {
				@include qodefHeadingStyle($heading: h3);
			}

			&-text {
				@include qodefHeadingStyle($heading: h5);
			}
		}

		&-image {
			bottom: 0;
			height: $label-size;
			overflow: hidden;
			position: absolute;
			width: $label-size;
			z-index: 0;

			img {
				height: $label-size;
				object-fit: cover;
				width: $label-size;
			}
		}
	}

	.qodef-slide-layout {

		&--image-left {

			.qodef-m {

				&-label-holder {
					right: 0;
				}

				&-image {
					left: 0;
				}
			}
		}

		&--image-right {

			.qodef-m {

				&-label-holder {
					left: 0;
				}

				&-image {
					right: 0;
				}
			}
		}
	}
}

#multiscroll-nav {
	display: none;

	li {
		height: 12px !important;
		margin: 32px 0 !important;
		width: 12px !important;

		a {

			span {
				background-color: $heading-color;
				border: none;
				height: 12px;
				left: 0;
				top: 0;
				width: 12px;
			}

			&.active {

				span {
					background-color: var(--qode-main-color);
				}
			}
		}
	}

	&.right {
		right: 34px !important;
	}

	@at-root .qodef-vertical-split-slider--init & {
		display: block;

		$skins: ('light', 'dark');
		$skins-color: ('#fff', '#000');
		@each $skin in $skins {

			&.qodef-skin--#{$skin} {

				a:not(.active) {

					span {
						background-color: #{nth($skins-color, index($skins, $skin))};
					}
				}
			}
		}
	}

	@at-root .qodef-fullscreen-menu--opened & {
		z-index: 98;
	}

	// html element in elementor iframe
	// buggy js, pagination gets multiplied
	@at-root html.elementor-html & {
		display: none !important;
	}
}
