/* Patterns - Interaction - Carousel */
/* Since this pattern is Deprecated, it should not appear at SASSDCS! */

.carousel {
	overflow: hidden;
	position: relative;
	transition: all 400ms ease;
	will-change: transform;

	//Service Studio Preview
	& {
		-servicestudio-max-height: 100vh;
		-servicestudio-max-height: none !important;
		-servicestudio-min-height: 80px !important;
	}

	// Service Studio Preview
	&:empty {
		//Service Studio Preview
		& {
			-servicestudio-min-height: 200px;
		}
	}

	&:not(.no-swipe) .carousel-container-content:hover {
		cursor: grab;
	}

	&.init {
		opacity: 0;

		// Service Studio Preview
		& {
			-servicestudio-opacity: 1;
		}
	}

	& > .list:not([data-virtualization-disabled]) > *,
	& > .list:not([data-animation-disabled]) > * {
		//Service Studio Preview
		& {
			-servicestudio-display: none !important;
		}
	}

	& > .list:not([data-virtualization-disabled]),
	& > .list:not([data-animation-disabled]) {
		//Service Studio Preview
		& {
			-servicestudio-min-height: 225px;
			-servicestudio-pointer-events: none;
		}
	}

	& > .list:not([data-virtualization-disabled]):after,
	& > .list:not([data-animation-disabled]):after {
		//Service Studio Preview
		& {
			-servicestudio-background-color: #fff;
			-servicestudio-background-position: center;
			-servicestudio-background-repeat: no-repeat;
			-servicestudio-background-size: 291px 225px;
			-servicestudio-content: ' ';
			-servicestudio-height: 100%;
			-servicestudio-left: 0;
			-servicestudio-min-height: 225px;
			-servicestudio-position: absolute;
			-servicestudio-top: 0;
			-servicestudio-width: 100%;
		}
	}

	&--animatable {
		transition: all 250ms linear;
		will-change: transform;
	}

	/* fix carousel margin top for card pattern inside carousel */
	[data-block*='Card'] + [data-block*='Card'] .card {
		margin-top: var(--space-none);
	}

	.carousel-container {
		--carousel-width: 100%;
		width: var(--carousel-width);

		background-color: transparent;
		white-space: nowrap;

		// Service Studio Preview
		& {
			-servicestudio-min-height: 80px !important;
			-servicestudio-white-space: normal;
		}

		.list.list-group {
			background-color: transparent;
			white-space: nowrap;

			//Service Studio Preview
			& {
				-servicestudio-white-space: normal;
			}
		}

		/* Used for list and non list elements */
		& > .carousel-container-content > *:not(.list),
		& > .carousel-container-content > .list > div {
			display: inline-block;
			white-space: normal;
			width: 100%;
		}

		.carousel-container-content > {
			.list:not([data-virtualization-disabled]) > *,
			.list:not([data-animation-disabled]) > * {
				//Service Studio Preview
				& {
					-servicestudio-display: none !important;
				}
			}

			.list:not([data-virtualization-disabled]),
			.list:not([data-animation-disabled]) {
				//Service Studio Preview
				& {
					-servicestudio-min-height: 225px;
					-servicestudio-pointer-events: none;
				}
			}

			.list:not([data-virtualization-disabled]):after,
			.list:not([data-animation-disabled]):after {
				//Service Studio Preview
				& {
					-servicestudio-background-color: #fff;
					-servicestudio-background-position: center;
					-servicestudio-background-repeat: no-repeat;
					-servicestudio-background-size: 291px 225px;
					-servicestudio-content: ' ';
					-servicestudio-height: 100%;
					-servicestudio-left: 0;
					-servicestudio-min-height: 225px;
					-servicestudio-position: absolute;
					-servicestudio-top: 0;
					-servicestudio-width: 100%;
				}
			}
		}
	}

	.carousel-container-content {
		// Service Studio preview
		& {
			-servicestudio-min-height: 80px !important;
		}

		.OSFillParent {
			display: inline-block;
		}

		.grid-gallery .OSFillParent {
			display: inherit;
		}
	}

	.carousel-navigation {
		align-items: center;
		background-color: var(--color-neutral-0);
		border-radius: var(--border-radius-circle);
		box-shadow: var(--shadow-xs);
		color: var(--color-neutral-7);
		cursor: pointer;
		display: flex;
		font-size: var(--font-size-h4);
		height: 40px;
		justify-content: center;
		opacity: 1;
		position: absolute;
		top: 50%;
		transform: translateY(-25px);
		transition: opacity 150ms linear;
		width: 40px;
		will-change: opacity;
		z-index: var(--layer-local-tier-2);

		&.disabled {
			opacity: 0.3;
		}

		&.hidden {
			display: none;
		}

		&.carousel-navigation-left {
			left: 24px;
		}

		&.carousel-navigation-right {
			right: 24px;
			text-align: right;
		}
	}

	.carousel-dots-container {
		margin-top: var(--space-base);
		text-align: center;

		&.disabled {
			display: none;
		}

		.carousel-dot {
			background-color: var(--color-neutral-5);
			border-radius: var(--border-radius-circle);
			cursor: pointer;
			display: inline-block;
			height: 8px;
			margin: 0 var(--space-xs);
			width: 8px;

			&.active {
				background-color: var(--color-primary);
			}
		}
	}

	&-is-moving {
		& .hide-on-drag {
			opacity: 0;
			transition: opacity 250ms ease;
		}
	}

	/* Fix for lists inside Carousel */
	.list.list-group {
		overflow: initial;
	}

	/* Fix for svg's inside Carousel */
	svg {
		max-width: 100%;
	}
}

// Accessibility --------------------------------------------------------------------
.has-accessible-features {
	.carousel {
		.carousel-navigation:focus {
			box-shadow: 0 0 0 3px var(--color-focus-outer);
		}
	}
}