attract/src/styles/_shots.sass

.table
	.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

			&.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
			border-left: thin solid transparent
			border-right: thin solid transparent

			&.active
				background-color: $color-background

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

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

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

				a
					display: inline-block /* Each task in a new line */

					position: relative
					top: 2px
					height: 100%
					width: 100%
					transition: all 150ms ease-in-out
					+status-background-color-before

					&:before
						display: block
						content: ''
						position: absolute
						width: 16px
						height: 16px
						border-radius: 50%
						border: 2px solid transparent
						top: 50%
						left: 50%
						transform: translate(-50%, -50%)

					&.active
						opacity: 1
						border-radius: 2px
						display: inline-block

					&.task-add
						width: auto
						border-radius: initial
						opacity: 0
						vertical-align: middle

				&:hover a.task-add
					opacity: 1

			&:hover
				a
					opacity: 1

.attract-form span.shot_id
	float: right

.attract-form
	.item-id
		padding: 8px
		margin-left: 10px
		width: 40px
		border: thin solid transparent

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

		&:active
			background-color: $color-background

	.btn.copy-to-clipboard.item-id
		color: transparent
		position: relative
		&::selection
			color: transparent
			background-color: transparent

	.btn.copy-to-clipboard+.copy-to-clipboard-icon
		position: relative
		height: 40px
		pointer-events: none
		color: $color-text-dark-primary
		i
			position: absolute
			top: 8px
			left: -32px
			font-size: 1.2em