.zoetrope {	
	position: relative;

	.zoetrope-track-wrapper {
		overflow: hidden;
		position: relative;
		transition: height .1s;
	}
	
	&.zoetrope-draggable .zoetrope-track-wrapper {
		cursor: grab;
	}
	
	&.isDragging .zoetrope-track-wrapper {
		cursor: grabbing;
	}

	&:not(.isDragging) .zoetrope-track a {
		cursor: pointer;
    pointer-events: all;
  }
	
	.zoetrope-track {
		align-items: flex-start;
		display: flex;
		left: 0;
		position: absolute;
		right: auto;
		top: 0;
		width: auto;
	
		& > * {
			//flex: 0 0 0;
			flex-grow: 1;
			flex-shrink: 0;
			//min-width: calc(var(--slide-width) * 1px * (1 / var(--slides-to-show)));
			width: calc( (var(--slide-width) / var(--slides-to-show)) * 1px);
		}
	}
	
	&.isDragging .zoetrope-track {
		pointer-events: none;
	}
	
	&[infinite] [slide-index]:first-child {
		margin-left: calc( (((var(--slides-to-show) * 2) - 1)/var(--slides-to-show)) * var(--slide-width) * -1px );
	}
	
	&.isDragging {
		[slide-index] {
			cursor: grabbing;
		}
	}
	
	&.fade {
		[slide-index] {
			left: 100%;
			opacity: 0;
			position: absolute;
		}
	}
	
	&.lazy-load {
		[slide-index] { 
			padding: 0; 
		
			&::after {content:none;}	
		
			img {
				max-width: unset;
				min-height: 100%;
				object-fit: cover;
				min-width: 100%;
			}
		}
	}
	
	.zoetrope-dots {
		bottom: 1rem;
		display: flex;
		font-size: 0;
		left: 50%;
		justify-content: center;
		position: absolute;
		transform: translateX(-50%);
	
		button {
			background: #666;
			border-radius: 50%;
			cursor: pointer;
			height: .75rem;
			width: .75rem;
			
			&:not(:last-child) {
				margin-right: .5rem;
			}
		
			&.active {
				background: #222;
			}
		}
	}
	
	/*.slide {
		cursor: grab;
	}*/
	
	.zoetrope-button {
		background-color: transparent;
		background-repeat: no-repeat;
		background-size: contain;
		border: none;
		cursor: pointer;
		font-size: 0;
		height: 5rem;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		transition: all .3s;
		width: 1.875rem;
		
		&[disabled] {
			opacity: .6;
			pointer-events: none;
		}
	}
	
	.zoetrope-button-prev {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 192 512'%3E%3Cpath fill='%23222' d='M4.2 247.5L151 99.5c4.7-4.7 12.3-4.7 17 0l19.8 19.8c4.7 4.7 4.7 12.3 0 17L69.3 256l118.5 119.7c4.7 4.7 4.7 12.3 0 17L168 412.5c-4.7 4.7-12.3 4.7-17 0L4.2 264.5c-4.7-4.7-4.7-12.3 0-17z'%3E%3C/path%3E%3C/svg%3E");
		left: 1rem;
	}
	
	.zoetrope-button-next {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 192 512'%3E%3Cpath fill='%23222' d='M187.8 264.5L41 412.5c-4.7 4.7-12.3 4.7-17 0L4.2 392.7c-4.7-4.7-4.7-12.3 0-17L122.7 256 4.2 136.3c-4.7-4.7-4.7-12.3 0-17L24 99.5c4.7-4.7 12.3-4.7 17 0l146.8 148c4.7 4.7 4.7 12.3 0 17z'%3E%3C/path%3E%3C/svg%3E");
		right: 1rem;
	}
}