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

.media-bar-item
	position: relative
	display: inline-block
	vertical-align: top
	// Spacing through margins.
	margin-right: 15px

	&:first-child
		margin-left: 15px

	@media $media-sm-up
		margin-right: 20px

		&:first-child
			margin-left: 20px

	img
		z-index: 0

.-backdrop
	change-bg('darkest')
	elevate-hover-2()

.-play
	@extend $play-button-overlay, $play-button-overlay.small

.-wrapper
	display: block

	&:hover
		.play-button-overlay
			background-color: rgba($black, 0.85)

			&, .jolticon
				theme-prop('color', 'highlight')
				cursor: zoom-in

	// Can't zoom on xs.
	&, .jolticon
		cursor: default

	@media $media-sm-up
		&, .jolticon
			cursor: zoom-in
