.table
	.table-cell
		&.shot-status
			width: 5px
			height: 100%
			display: inline-block
	.table-head
		.table-cell
			text-align: center

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

			&.task-type
				text-transform: capitalize

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

	.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

			&.status
				&-invalid
					.shot-status
						background-color: $color-status-invalid-dark
				&-todo
					.shot-status
						background-color: $color-status-todo-dark
				&-in_progress
					.shot-status
						background-color: $color-status-in_progress-dark
				&-on_hold
					.shot-status
						background-color: $color-status-on_hold-dark
				&-approved
					.shot-status
						background-color: $color-status-approved-dark
				&-cbb
					.shot-status
						background-color: $color-status-cbb-dark
				&-final
					.shot-status
						background-color: $color-status-final-dark
				&-review
					.shot-status
						background-color: $color-status-review-dark

		.table-cell
			text-align: center
			&.shot-name
				padding: 0px 10px
				text-align: left
				a
					color: $color-text-dark-primary

			&.task-type
				max-width: 120px

				a
					display: inline-block /* Each task in a new line */
					opacity: 0
					border-radius: 50%
					width: 16px
					height: 16px
					position: relative
					top: 2px
					+text-overflow-ellipsis
					+status-background-color
					transition: all 150ms ease-in-out

					&.active
						opacity: 1
						border-radius: 3px

					&.task-add
						width: auto
						border-radius: initial

				a[class^="status-"]
					opacity: 1

			&:hover
				a
					opacity: 1

.attract-form span.shot_id
	float: right