/**
 * container possible states with data-flexy attribute:
 * no: future slider, to be initialized
 * no:scalerotate: future slider with scaleRotate effect
 * empty string: flexy is initialized properly
 *
 * One can customize content of the :after attribute in order to enable/disable
 * the slider effect of flexy. The JS will detect this moment and remove/restore
 * the data-flexy attribute.
 */

.flexy-container:not([data-flexy]) {

	.flexy-items {
		flex-wrap: wrap;
	}
}

.flexy,
.flexy-pills {
	position: relative;
	user-select: none;
}

[data-flexy*='no'] {

	.flexy-items > * {
		transform: translate3d(calc(-100% * var(--current-item, 0)), 0, 0);
	}
}

[data-flexy*='no'][data-wrap*='viewport'] {
	
	.flexy-items > * {
		order: 2;
		transform: translate3d(-100%, 0, 0);
	}

	.flexy-items > *:last-child {
		order: 1;
	}
}

[data-flexy='no'] [data-height='dynamic'] > *:not([data-item='initial']) {
	height: 1px;
}

.flexy-items {
	display: flex;
	will-change: transform, max-height;

	> * {
		cursor: grab;
	}

	&[data-height='dynamic'] {
		max-height: var(--sliderHeight, initial);
		transition: max-height 0.2s ease;
	}
}

.flexy-items > * {
	flex: 0 0 100%;
	max-width: 100%;
}

// Disable click event while dragging
[data-flexy-dragging] {
	cursor: ew-resize;

	.flexy-items > * {
		pointer-events: none;
	}
}

// Flexy view
[data-flexy-view='boxed'] {
	overflow: hidden;
}

// flexy pills
.flexy-pills ol,
.flex-control-nav {
	display: flex;
	flex-direction: var(--pills-direction);
	justify-content: var(--pills-horizontal-alignment);
	flex-wrap: var(--pills-wrap, wrap);
	list-style: none;
	padding: 0;
	margin-bottom: 0;

	li {
		flex: 0 0 var(--thumbs-width, 20%);
		width: var(--thumbs-width, 20%);
		cursor: pointer;
	}
}

// flexy pills slider
.flexy-pills [data-flexy] {
	overflow: hidden;
	--pills-wrap: nowrap;
}

// data type circle
.flexy-pills[data-type='circle'] {
	max-width: 180px;
	margin-top: 30px;
	margin-inline: auto;
	
	ol:not([data-flexy]),
	ol[data-flexy*="paused"] {
		--pills-horizontal-alignment: center;
	}

	li {
		--thumbs-width: 20%;
		--thumbs-top-spacing: 0;

		display: flex;
		align-items: center;
		justify-content: center;
		height: 20px;

		&:before {
			content: '';
			width: 6px;
			height: 6px;
			border-radius: 100%;
			box-shadow: inset 0 0 0 5px var(--flexyInitialPill, rgba(44, 62, 80, 0.9));
			transition: box-shadow 0.2s ease, transform 0.2s ease;
		}

		&.active {
			&:before {
				transform: scale3d(2, 2, 1);
				box-shadow: inset 0 0 0 1px var(--flexyActivePill, rgba(44, 62, 80, 0.9));
			}
		}
	}
}

// arrows
.flexy-container {

	&:not([data-flexy]),
	&[data-flexy*="no"] {

		.flexy > [class*='flexy-arrow'] {
			display: none;
		}
	}
}

[class*='flexy-arrow'] {
	position: absolute;
	top: var(--flexy-nav-arrow-top-offset, calc(50% - 20px));
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	width: 40px;
	height: 40px;
	cursor: pointer;
	border-radius: 100%;
	color: var(--flexy-nav-arrow-color, var(--theme-text-color));
	box-shadow: 0px 25px 40px rgba(0, 0, 0, 0.03);
	background: var(--flexy-nav-background-color, #fff);
	transform: rotate(var(--rotate, 0)) translateX(var(--translate-x, 0));
	transition: all 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955);

	&:hover {

		@media (any-hover: hover) {
			color: var(--flexy-nav-arrow-hover-color, #fff);
			background: var(--flexy-nav-background-hover-color, var(--theme-palette-color-1));
		}
	}
}

.flexy-arrow-prev {
	left: 20px;
	--translate-x: -10px;
}

.flexy-arrow-next {
	right: 20px;
	--translate-x: 10px;
}

[class*='flexy']:hover > [class*='flexy-arrow'] {

	@media (any-hover: hover) {
		opacity: 1;
		--translate-x: 0;
	}
}

.flexy-pills {
	--flexy-nav-arrow-top-offset: calc(50% - 20px + var(--thumbs-spacing, 15px) / 2);

	ol {
		&:not([data-flexy]),
		&[data-flexy*='no'] {

			~ [class*='arrow'] {
				display: none;
			}
		}
	}
}