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

.horizontal-scroll {
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;

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

	& > *:not(table) {
		display: inline-block;
		transform: translateZ(0);
	}

	& > .list {
		& > * {
			display: inline-block;
			transform: translateZ(0);
		}

		& > :not(:first-child) {
			margin-left: var(--space-base);
		}

		& > [data-block*='Card'] + [data-block*='Card'] .card {
			margin-top: var(--space-none);
		}
	}

	.list {
		background-color: transparent;
	}

	& > :not(:first-child) {
		margin-left: var(--space-base);
	}

	& > [data-block*='Card'] + [data-block*='Card'] .card {
		margin-top: var(--space-none);
	}
}