@import '~styles/variables'
@import '~styles-lib/mixins'
@import './variables'

$-controls-padding = 10px

.media-bar-lightbox
	.dragging &
		cursor: grabbing

		// iframe elements don't allow events to bubble back to the root document, so we need
		// to prevent all pointer events while dragging to keep our cursor context in the root
		// document - otherwise youtube and other iframe embeds will break the dragging.
		>>> iframe
			pointer-events: none

.-inner
	display: flex
	flex-flow: column nowrap
	position: fixed
	top: 0
	right: 0
	bottom: 0
	left: 0
	z-index: $zindex-media-bar-lightbox
	user-select: none
	background-color: $black

	@media $media-sm-up
		background-color: rgba(0, 0, 0, 0.85)

.-controls
	z-index: 1
	flex: 0 0 auto
	height: $-controls-height
	line-height: $-controls-height
	transition: right 300ms ease
	display: flex
	align-items: center
	justify-content: space-between

	@media $media-xs
		position: absolute
		bottom: 0
		left: 0
		right: 0

	@media $media-sm-up
		justify-content: flex-end
		padding-right: $-controls-padding

.-next
.-prev
	line-height: $-button-size
	z-index: 1
	background-color: rgba($black, 0.5)
	display: flex
	justify-content: center
	align-items: center

	@media $media-xs
		flex: 1
		height: 100%

	@media $media-sm-up
		position: absolute
		rounded-corners-lg()
		top: 50%
		width: $-button-size
		height: $-button-size
		margin-top: -(@height / 2)

		&.-hideable
			display: none

		> .jolticon
			font-size: 16px * 3

		&:hover
			background-color: $white

			> .jolticon
				color: $black

	> .jolticon
		font-size: 16px * 1.5
		color: $white

.-next
	@media $media-xs
		margin-left: 16px

	@media $media-sm-up
		right: 0
		border-top-right-radius: 0
		border-bottom-right-radius: 0

.-prev
	@media $media-xs
		margin-right: 16px

	@media $media-sm-up
		left: 0
		border-top-left-radius: 0
		border-bottom-left-radius: 0

// http://stackoverflow.com/questions/10269290/how-to-arrange-many-div-elements-side-by-side-with-no-wrap
.-slider
	height: 100%
	flex: 1 0 auto
	display: flex
	align-items: flex-start
	flex-flow: row nowrap
	// Ease out so that with fast flicks it doesn't look like it slows down after letting go.
	transition: transform 300ms $weak-ease-out

	@media $media-sm-up
		// Should take up the same amount of space on the bottom as the controls on top so
		// everything is centered.
		padding-bottom: $-controls-height

	// We need manual control of styling when dragging.
	.dragging &
		transition: none
