.table
	&#shot-list
		background-color: white
	.table-cell
		&.shot-status
			width: 5px
			height: 100%
	.table-head
		.table-cell
			text-align: center

			&.highlight .collapser
				color: $color-primary-dark

			&.shot-thumbnail
				width: $shots-list-thumbnail-width

			&.task-type
				text-transform: capitalize

			span.collapser
				cursor: pointer
				width: 100%
				display: inline-block
				padding: 5px

			&:hover
				span.collapser
					color: $color-primary

	.table-body
		display: table-row-group

		.table-row
			position: relative

			&.active
				border-color: $color-background-dark
				background-color: $color-background-light

				.table-cell:last-child
					box-shadow: inset -5px 0 0 $color-primary

			@include status-color-property(background-color, ' .shot-status', 'dark')

		.table-cell
			text-align: center
			border-left: thin solid transparent
			border-right: thin solid transparent

			&.active
				background-color: $color-background

			&.highlight
				background-color: $color-background-light

			&.shot-name
				text-align: left
				position: relative
				height: 100%
				a
					display: flex
					padding: 5px 10px
					color: $color-text-dark-primary

			&.task-type
				max-width: 120px
				position: relative
				height: 100%
				overflow: hidden

				a
					display: inline-block /* Each task next to each other */
					vertical-align: middle
					height: 100%
					min-height: 100%
					padding: 15px
					transition: all 150ms ease-in-out
					position: relative

					@include status-color-property(background-color, ':before', '')

					&:before
						display: block
						content: ''
						position: absolute
						width: 16px
						height: 16px
						border-radius: 50%
						border: 2px solid transparent
						+position-center-translate
						transition: all 150ms ease-in-out

					span
						display: block
						+position-center-translate
						z-index: 1
						font:
							weight: bold
							size: .8em
						text:
							align: center
							transform: capitalize
						color: white

					&.active
						opacity: 1

						&:before
							transform: translate(-50%, -50%) scale(1.3)
							border-color: $color-primary
						&:hover
							border-color: $color-primary-light

					&.task-add
						width: auto
						border-radius: initial
						opacity: 0
						vertical-align: middle
						padding: 5px
						display: flex

						&:hover
							opacity: 1

					&:hover
						&:before
							opacity: .8
							transform: translate(-50%, -50%) scale(1.2)
						&.active:before
							transform: translate(-50%, -50%) scale(1.3)

.attract-box
	.item-id
		padding: 8px
		margin-left: 10px
		width: 40px
		border: thin solid transparent
		background-color: white
		color: $color-text-dark-secondary
		box-shadow: none
		border-color: $color-text-dark-hint

		&:hover
			color: $color-text-dark-primary
			border-color: $color-text-dark-primary

#item-details
	height: 100%
	display: flex
	flex-direction: column

	.item-details-empty
		display: flex
		align-items: center
		justify-content: center
		width: 100%
		height: 100%
		color: rgba($color-text-dark-hint, .5)
		cursor: default
		font:
			size: 2em
			weight: 100

#item-view-feed
	padding: 10px
	color: $color-text-dark-primary
	pre
		margin: 15px auto