/**
 * @author Valentin Alisch <hallo@valentinalisch.de>
 * @version 0.1
 *
 * Slider.css
 */

slider-wrap,
.slider-wrap,
slider-slide,
.slider-slide {
	display: block;
	overflow: hidden;
}

slider-wrap[data-transition="horizontal"],
.slider-wrap[data-transition="horizontal"] {
	position: relative;
}

slider-wrap[data-transition="vertical"],
.slider-wrap[data-transition="vertical"] {}

slider-wrap[data-transition="fade"],
.slider-wrap[data-transition="fade"] {
	position: relative;
}

	slider-wrap *,
	.slider-wrap * {
		-webkit-user-select: none;
		-moz-user-select: none;
		user-select: none;
	}



	slider-wrap slider-slides,
	slider-wrap .slider-slides,
	.slider-wrap slider-slides,
	.slider-wrap .slider-slides {
		display: flex;
		position: relative;
		align-items: flex-start;
		position: relative;
		height: 100%;
		z-index: 10;
		box-sizing: content-box;
	}

	slider-wrap[data-transition="horizontal"] slider-slides,
	slider-wrap[data-transition="horizontal"] .slider-slides,
	.slider-wrap[data-transition="horizontal"] slider-slides,
	.slider-wrap[data-transition="horizontal"] .slider-slides {
		padding-bottom: 50px;
		margin-bottom: -50px;
	}

	slider-wrap[data-transition="horizontal"][data-scroll="true"] slider-slides,
	slider-wrap[data-transition="horizontal"][data-scroll="true"] .slider-slides,
	.slider-wrap[data-transition="horizontal"][data-scroll="true"] slider-slides,
	.slider-wrap[data-transition="horizontal"][data-scroll="true"] .slider-slides {
		overflow-y: hidden;
		overflow-x: scroll;
	}

	slider-wrap[data-transition="vertical"] slider-slides,
	slider-wrap[data-transition="vertical"] .slider-slides,
	.slider-wrap[data-transition="vertical"] slider-slides,
	.slider-wrap[data-transition="vertical"] .slider-slides {
		flex-direction: column;
		padding-right: 50px;
		margin-right: -50px;
	}

	slider-wrap[data-transition="vertical"][data-scroll="true"] slider-slides,
	slider-wrap[data-transition="vertical"][data-scroll="true"] .slider-slides,
	.slider-wrap[data-transition="vertical"][data-scroll="true"] slider-slides,
	.slider-wrap[data-transition="vertical"][data-scroll="true"] .slider-slides {
		overflow-y: scroll;
		overflow-x: hidden;
	}

		slider-wrap:not( [data-transition="fade"] ) slider-slides > *,
		slider-wrap:not( [data-transition="fade"] ) .slider-slides > *,
		.slider-wrap:not( [data-transition="fade"] ) slider-slides > *,
		.slider-wrap:not( [data-transition="fade"] ) .slider-slides > * {
			flex: 1;
			min-width: var( --slide-width );
			max-width: var( --slide-width );
			width: var( --slide-width );
		}

		slider-wrap[data-transition="fade"] slider-slides > *,
		slider-wrap[data-transition="fade"] .slider-slides > *,
		.slider-wrap[data-transition="fade"] slider-slides > *,
		.slider-wrap[data-transition="fade"] .slider-slides > * {
			opacity: 0;
		}

		slider-wrap[data-transition="fade"] slider-slides > *:not( .current ):not( .active ),
		slider-wrap[data-transition="fade"] .slider-slides > *:not( .current ):not( .active ),
		.slider-wrap[data-transition="fade"] slider-slides > *:not( .current ):not( .active ),
		.slider-wrap[data-transition="fade"] .slider-slides > *:not( .current ):not( .active ) {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
		}

		slider-wrap[data-transition="fade"] slider-slides > .current,
		slider-wrap[data-transition="fade"] .slider-slides > .current,
		.slider-wrap[data-transition="fade"] slider-slides > .current,
		.slider-wrap[data-transition="fade"] .slider-slides > .current {
			z-index: 10;
		}

		slider-wrap[data-transition="fade"] slider-slides > .target,
		slider-wrap[data-transition="fade"] .slider-slides > .target,
		.slider-wrap[data-transition="fade"] slider-slides > .target,
		.slider-wrap[data-transition="fade"] .slider-slides > .target {
			z-index: 20;
		}

		slider-wrap[data-transition="fade"] slider-slides > .active,
		slider-wrap[data-transition="fade"] .slider-slides > .active,
		.slider-wrap[data-transition="fade"] slider-slides > .active,
		.slider-wrap[data-transition="fade"] .slider-slides > .active {
			z-index: 30;
		}

			slider-wrap slider-slides > * img,
			slider-wrap .slider-slides > * img,
			.slider-wrap slider-slides > * img,
			.slider-wrap .slider-slides > * img {
				display: block;
				pointer-events: none;
			}



	slider-wrap slider-indicators,
	.slider-wrap slider-indicators {
		display: flex;
		position: relative;
		z-index: 30;
		align-items: center;
		justify-content: center;
	}



	slider-wrap slider-navigation,
	.slider-wrap slider-navigation {}