@require '~styles/variables'
@require '~styles-lib/mixins'

_scrollable-grid()
	white-space: nowrap
	margin-left: -($grid-gutter-width-xs / 2)
	margin-right: -($grid-gutter-width-xs / 2)

	@media $media-sm-up
		margin-left: -($grid-gutter-width / 2)
		margin-right: -($grid-gutter-width / 2)

	& > .row
		margin-left: 0
		margin-right: 0

	.scrollable-grid-item
		display: inline-block
		float: none
		vertical-align: top

@media $media-xs
	.scrollable-grid-xs
		scrollable-x()
		_scrollable-grid()

@media $media-sm
	.scrollable-grid-sm
		scrollable-x()
		_scrollable-grid()

@media $media-mobile
	.scrollable-grid-mobile
		scrollable-x()
		_scrollable-grid()

.scrollable-grid
	scrollable-x()
	_scrollable-grid()
