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



/* ------------------------- */

/**
 * Wrap
 * 
 * @since 1.0
 */
slider-wrap,
.slider-wrap {
	--slider-drag-buffer: 100vw;
	--slider-slides-display--default: flex;
	--slider-slide-width--default: 100%;
	--slider-slide-align--default: flex-start;
	--slider-indicator-size--default: 1em;

	display: block;
	overflow: hidden;
	position: relative;
}

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

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

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

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

		-webkit-tap-highlight-color: transparent;
		-webkit-touch-callout: none;
	}



/* ------------------------- */

/**
 * Slides Wrap
 * 
 * @since 1.1.5
 */
slider-slides-wrap,
.slider-slides-wrap {
	display: block;
	position: relative;
	overflow: hidden;

	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

slider-slides-wrap::-webkit-scrollbar,
.slider-slides-wrap::-webkit-scrollbar {
	display: none;
}

slider-wrap[data-mouse="true"][data-drag="true"] slider-slides-wrap,
slider-wrap[data-mouse="true"][data-drag="true"] .slider-slides-wrap,
.slider-wrap[data-mouse="true"][data-drag="true"] slider-slides-wrap,
.slider-wrap[data-mouse="true"][data-drag="true"] .slider-slides-wrap {
	cursor: grab;
}

slider-wrap[data-mouse="true"][data-drag="true"]:active slider-slides-wrap,
slider-wrap[data-mouse="true"][data-drag="true"]:active .slider-slides-wrap,
.slider-wrap[data-mouse="true"][data-drag="true"]:active slider-slides-wrap,
.slider-wrap[data-mouse="true"][data-drag="true"]:active .slider-slides-wrap {
	cursor: grabbing;
}

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

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



/* ------------------------- */

/**
 * Slides 
 * 
 * @since 1.0
 */

slider-slides,
.slider-slides {
	display: var( --slider-slides-display, var( --slider-slides-display--default ) );
	position: relative;
	height: 100%;
	z-index: 10;

	min-width: 100%;
	box-sizing: content-box;
}

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;
}

slider-wrap[data-transition="fade"] slider-slides > *:not( .current ):not( .target ):not( .active ),
slider-wrap[data-transition="fade"] .slider-slides > *:not( .current ):not( .target ):not( .active ),
.slider-wrap[data-transition="fade"] slider-slides > *:not( .current ):not( .target ):not( .active ),
.slider-wrap[data-transition="fade"] .slider-slides > *:not( .current ):not( .target ):not( .active ) {
	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;
}

slider-wrap[data-transition="horizontal"]:not( [data-loop="true"] ) slider-slides,
slider-wrap[data-transition="horizontal"]:not( [data-loop="true"] ) .slider-slides,
.slider-wrap[data-transition="horizontal"]:not( [data-loop="true"] ) slider-slides,
.slider-wrap[data-transition="horizontal"]:not( [data-loop="true"] ) .slider-slides {
	padding-left: var( --slider-drag-buffer, var( --slider-drag-buffer--default ) );
	padding-right: var( --slider-drag-buffer, var( --slider-drag-buffer--default ) );
}



/* ---------- */
slider-slide,
.slider-slide {
	position: relative;
	z-index: 1;
	flex: 1;
	align-self: var( --slider-slide-align, var( --slider-slide-align--default ) );
	min-width: var( --slider-slide-width, var( --slider-slide-width--default ) );
	max-width: var( --slider-slide-width, var( --slider-slide-width--default ) );
	width: var( --slider-slide-width, var( --slider-slide-width--default ) );
}

slider-slide.current,
.slider-slide.current {
	z-index: 10;
}

slider-slide.target,
.slider-slide.target {
	z-index: 20;
}

slider-slide.active,
.slider-slide.active {
	z-index: 30;
}

	slider-slide img,
	.slider-slide img {
		display: block;
		pointer-events: none;
		width: 100%;
		height: auto;

		/*-webkit-transform: translate3d( 0, 0, 0 );
		-moz-transform: translate3d( 0, 0, 0 );
		transform: translate3d( 0, 0, 0 );*/
	}



/* ------------------------- */

/**
 * Controls
 * 
 * @since 1.0
 */
slider-controls,
.slider-controls {
	display: flex;
	position: relative;
	z-index: 20;
	align-items: center;
	justify-content: space-between;
	pointer-events: none;
}

slider-control,
.slider-control {
	cursor: pointer;
	pointer-events: all;
}

slider-control[data-target="prev"],
.slider-control[data-target="prev"],
slider-control[data-target="next"],
.slider-control[data-target="next"] {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

slider-control[data-target="next"],
.slider-control[data-target="next"] {
	justify-content: flex-end;
}



/* ------------------------- */

/**
 * Indicators
 * 
 * @since 1.0
 */
slider-indicators,
.slider-indicators {
	display: flex;
	position: relative;
	z-index: 30;
	align-items: center;
	justify-content: center;
}

slider-indicator,
.slider-indicator {
	width: var( --slider-indicator-size, var( --slider-indicator-size--default ) );
	height: var( --slider-indicator-size, var( --slider-indicator-size--default ) );
	margin: var( --slider-indicator-margin, calc( var( --slider-indicator-size, var( --slider-indicator-size--default ) ) * 0.25 ) );

	cursor: pointer;
	border: var( --slider-indicator-border, 1px solid currentColor );
	border-radius: var( --slider-indicator-radius, var( --slider-indicator-size, var( --slider-indicator-size--default ) ) );
}

slider-indicator.active,
.slider-indicator.active {
	background: currentColor;
}