/**
 * 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 > * {
		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: 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;

	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;
	--thumbs-spacing: 15px;

	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: var(--flexy-nav-arrow-top-offset, calc(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;
	transform: rotate(var(--rotate, 0)) translateX(var(--translate-x, 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 {

		@media (any-hover: 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));
			}
		}
	}
}

.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 ol:not([data-flexy]) ~ [class*='arrow'],
// .flexy-pills ol[data-flexy*='no'] ~ [class*='arrow'] {
// 	display: none;
// }

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

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