/**
 * 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-pills,
	[class*='flexy-arrow'] {
		display: none;
	}
}

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

[data-flexy*='no'] {
	.flexy-items > * {
		// order: 2;
		transform: translate3d(calc(-100% * var(--current-item, 0)), 0, 0);
	}

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

[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: pointer;
	}

	&[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;
	--listItemSpacing: 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'] li {
	--thumbs-width: 30px;

	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--thumbs-width);

	&: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
[class*='flexy-arrow'] {
	position: absolute;
	top: calc(var(--thumbs-spacing, 15px) / 2 + 50% - 20px);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	cursor: pointer;
	color: var(--flexy-nav-arrow-color, var(--color));
	opacity: 0;
	transition: color 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955),
		opacity 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955),
		transform 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955);

	&:before {
		position: absolute;
		content: '';
		width: 100%;
		height: 100%;
		border-radius: 100%;
		background: var(--flexy-nav-background-color, #fff);
		transition: transform 0.2s ease;
		box-shadow: 0px 25px 40px rgba(0, 0, 0, 0.03);
	}

	svg {
		position: relative;
		fill: currentColor;
	}

	&:hover {
		color: var(--flexy-nav-arrow-hover-color, #fff);

		&:before {
			transform: scale3d(1.1, 1.1, 1);
			background: var(
				--flexy-nav-background-hover-color,
				var(--paletteColor1)
			);
		}
	}
}

[class*='flexy-arrow'] {
	transform: rotate(var(--rotate, 0)) translateX(var(--translate-x, 0));
}

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

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

[class*='flexy']:hover > [class*='flexy-arrow'] {
	opacity: 1;
	--translate-x: 0;
}

.flexy-pills ol:not([data-flexy]) ~ [class*='arrow'],
.flexy-pills ol[data-flexy*='no'] ~ [class*='arrow'] {
	display: none;
}