body
	position: absolute // allow columns/errors to fill the whole page
	top: 0
	left: 0
	right: 0
	bottom: 0

	&[data-context="task"]
		overflow: hidden // columns scroll independently
		nav.sidebar .navbar-item.tasks
			+sidebar-button-active

	&[data-context="shot"]
		overflow: hidden // columns scroll independently
		nav.sidebar .navbar-item.shots
			+sidebar-button-active

	&[data-context="asset"]
		overflow: hidden // columns scroll independently
		nav.sidebar .navbar-item.assets
			+sidebar-button-active

	&[data-context="dashboard"]
		nav.sidebar .navbar-item.attract
			+sidebar-button-active
		#col_main
			background-color: $color-background-light
			.col_header
				box-shadow: none

nav.sidebar
	a.navbar-item
		&.tasks, &.shots, &.assets
			text-transform: initial
			font-size: .85em

.input-group
	width: 100%
	display: flex
	align-items: center

	label
		padding-right: 10px
		min-width: 80px
		white-space: nowrap

	&.select_multiple
		margin-bottom: 10px

.input-group
	input, textarea, select
		margin-top: 10px
		margin-bottom: 10px
		width: 100%

	button
		&#item-save
			+button($color-success, 3px)


/* Attract specific table tweaks */
.item-list
	overflow-x: auto
	.table
		background-color: white
	.table-row:hover
		background-color: $color-background-light

	.table-cell
		&.item-status
			width: 5px
			height: 100%
			border-bottom: none
	.table-head
		&.is-fixed
			position: fixed
			top: 42px
			z-index: 1
			background-color: white

		.table-cell
			text-align: center

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

			&.item-thumbnail
				width: $items-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
		.table-row
			@include status-color-property(background-color, ' .item-status', '')

		.table-cell
			text-align: center

			&.active
				background-color: $color-background

			&.highlight
				background-color: rgba(white, .5)

				&.task-type a:before
					transform: translate(-50%, -50%) scale(1.2)

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

					span
						margin: auto 0
						line-height: 1.1em

			&.item-thumbnail
				border-left: none
				border-bottom: none
				img
					transition: opacity 150ms ease-in-out

			&.task-type
				position: relative
				height: 100%
				white-space: nowrap

				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', '')

					&:focus
						outline: none

						&:before
							transform: translate(-50%, -50%) scale(1.5)

					&:before
						display: block
						content: ''
						position: absolute
						width: 16px
						height: 16px
						border-radius: 50%
						border: 0px solid transparent
						+position-center-translate
						transition: background-color 250ms ease-in-out, border 150ms ease-in-out, box-shadow 500ms 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: 2px solid white
							box-shadow: 0 0 0 1px rgba($color-primary, .2), 1px 1px 0 rgba(black, .2)
						&:hover
							border-color: $color-primary-light
						&.flash-on
							background: transparent !important
							&:before
								box-shadow: 0 0 25px 5px white

					&.processing
						background-image: none
						pointer-events: none
						cursor: not-allowed

						&:before
							+stripes-animate
							+stripes(transparent, rgba($color-background-active, .6), -45deg, 15px)
							animation-duration: 4s

						&.active
							background-image: none

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

						&:hover, &:focus
							opacity: 1

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

.item-list-header
	a
		color: $color-text-dark
		+text-overflow-ellipsis
	a.item-project
		color: $color-text-dark-secondary
		margin-right: 10px


/* Debug styles, such as status color legend on help */
.debug-info
	padding-top: 10px
	display: flex
	flex-direction: column

	.debug-info-toggle
		width: 100%
		color: $color-text-dark-hint
		font-size: .9em
		text-align: right

.status-debug-item
	width: 100%

.status-debug-item-statuses
	display: flex
	align-items: center
	justify-content: center
	color: $color-text
	text-shadow: 1px 1px 0 rgba(white, .3)

	.light, .regular, .dark
		flex: 1
		min-height: 25px
		display: flex
		align-items: center
		justify-content: center

	.light
		@include status-color-property(background-color, '', 'light')
	.regular
		flex: 3
		@include status-color-property(background-color, '', '')
	.dark
		@include status-color-property(background-color, '', 'dark')


/* General style for activities in all places */
.d-activity
	font-size: .9em

	$activity-highlight-color: #00cc9f
	ul
		cursor: default
		padding: 5px
		color: $color-text-dark-primary
		list-style: none

		li
			padding: 0 10px 7px 10px
			position: relative

			span.date
				color: darken($activity-highlight-color, 5%)

			/* Left Dot */
			&:after
				content: ''
				display: block
				position: absolute
				top: 6px
				left: -3px
				width: 5px
				height: 5px
				border-radius: 50%
				background-color: $color-background-light
				border: thin solid $activity-highlight-color
				transition: all 250ms ease-in-out

			/* Left Line */
			&:before
				content: ''
				display: block
				position: absolute
				top: 10px
				left: -1px
				width: 1px
				height: 100%
				background-color: $activity-highlight-color
				transition: all 250ms ease-in-out

			&:last-child
				&:before
					background-color: transparent

		span.actor
			padding: 0 5px
			color: $color-text-dark

		img.actor-avatar
			width: 16px
			height: 16px
			border-radius: 50%
			margin-right: 5px
			position: relative
			top: -2px


.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
	overflow-x: hidden

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

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

	#comments-container
		margin-top: 0