/* Patterns - Interaction - Scrollable Area */
////
/// @group Patterns-Scrollable_Area
/// Patterns - Interaction - Scrollable Area

/* $4.3.13 - Patterns - Interaction - ScrollableArea */
.scrollable-area {
	&-content {
		--scrollable-area-height: auto;
		--scrollable-area-width: 100%;

		height: var(--scrollable-area-height);
		width: var(--scrollable-area-width);

		&.horizontal-scroll,
		&.vertical-scroll {
			.osui {
				&-deprecated.carousel,
				&-carousel {
					.list.list-group {
						overflow-x: initial;
						overflow-y: initial;
					}
				}
			}
		}

		&.none {
			-ms-overflow-style: none; /* IE and Edge */
			scrollbar-width: none; /* Firefox */

			&:hover {
				cursor: default;
			}

			&::-webkit-scrollbar {
				display: none;
			}
		}

		&.horizontal-scroll {
			&,
			.list.list-group {
				overflow-x: auto;
				overflow-y: hidden;
			}
		}

		&.vertical-scroll {
			&,
			.list.list-group {
				overflow-x: hidden;
				overflow-y: auto;
			}
		}

		&.compact {
			&.horizontal-scroll,
			&.vertical-scroll {
				&::-webkit-scrollbar {
					width: 8px;
					height: 8px;
				}

				&::-webkit-scrollbar-track,
				&::-webkit-scrollbar-thumb,
				&:hover::-webkit-scrollbar-track {
					background-color: get-background-color('transparent');
				}

				&:hover::-webkit-scrollbar-thumb {
					background-color: rgba(173, 181, 189, 0.5);
					border-radius: 6px;
				}

				&::-webkit-scrollbar-thumb:hover {
					background-color: rgba(106, 113, 120, 0.5);
					border-radius: 6px;
				}
			}
		}
	}
}

[data-block='Interaction.ScrollableArea'] {
	&::-webkit-scrollbar {
		width: 8px;
		height: 8px;
	}

	&::-webkit-scrollbar-track,
	&::-webkit-scrollbar-thumb,
	&:hover::-webkit-scrollbar-track {
		background-color: get-background-color('transparent');
	}

	&:hover::-webkit-scrollbar-thumb {
		background-color: rgba(173, 181, 189, 0.5);
		border-radius: 6px;
	}

	&::-webkit-scrollbar-thumb:hover {
		background-color: rgba(106, 113, 120, 0.5);
		border-radius: 6px;
	}
}

// IsRTL -------------------------------------------------------------------------
///
.is-rtl {
	.horizontal-scroll {
		& > :not(:first-child),
		.list > :not(:first-child) {
			margin-left: unset;
			margin-right: var(--space-base);
		}
	}
}