.item-list.task
	overflow-x: hidden

.attract-box
	margin: 10px
	padding: 10px
	+container-box

	&.with-status
		border-top: thick solid $color-background-dark
		@include status-color-property(border-top-color, '', 'dark')
		@include status-color-property(color, ' select', 'dark')
		@include status-color-property(border-bottom-color, ' select', 'dark')

	.item-name
		font-size: 1.6em
		margin: 0

		+text-overflow-ellipsis

	span.item-name
		padding-left: 5px
		margin-top: 0
		color: $color-text-dark-secondary

	.item-description
		padding: 10px 5px
		color: $color-text-dark-primary

	.dropdown button
		height: 38px
		margin-left: 10px

	.dropdown-menu
		top: 36px
		left: initial
		right: 0
		padding-top: 0
		padding-bottom: 0
		border: thin solid $color-background
		box-shadow: 1px 1px 2px rgba(black, .1), 0 5px 25px rgba(black, .1)

		li
			display: flex
			height: 100%
			width: 100%
			padding: 0
			margin: 0

			&.divider
				height: 2px

			&.item-delete a:hover
				color: $color-danger

			a
				padding: 10px 15px 10px 12px
				flex: 1
				height: 100%
				color: $color-text-dark-primary
				i
					position: relative
					top: -1px
					left: -4px
					font-size: .9em

	.table.item-properties
		.table-body
			text-shadow: 1px 1px 0 white

			.table-row
				.table-cell
					padding: 3px 10px
					vertical-align: top
					line-height: 1.6em
					border: none
					color: $color-text-dark-primary
					@include status-color-property(color, '', 'dark')

					&:first-child
						width: 120px
						max-width: 200px
						text-align: right
						font-weight: bold
						padding-right: 10px
						border-right: thin solid $color-background-dark
						+text-overflow-ellipsis

				&.properties-assignees
					.table-cell span
						display: block
				&.properties-status
					cursor: help

.attract-box+.attract-box
	margin-top: 0

#item-add
	margin-left: auto
	font-size: .85em
	color: $color-primary

.status-indicator
	position: absolute
	height: 100%
	top: 0
	bottom: 0
	width: 5px

.task-list-item
	position: relative
	color: $color-text-dark

	&:hover
		color: $color-text-dark-primary
		background-color: $color-background-light
		text-decoration: none

	&.active
		text-decoration: none

	.status, .due_date
		display: inline-block
		margin-right: 10px
		text-transform: uppercase
		font-size: .8em
		text-decoration: none

	.due_date
		margin-left: auto
		color: $color-text-dark-primary
		+text-overflow-ellipsis

		&.late
			color: $color-danger

	.name
		padding: 5px 5px 5px 10px
		+text-overflow-ellipsis

	.shotname
		color: $color-text-dark-secondary
		margin-left: 15px
		padding-right: 10px
		position: relative
		+text-overflow-ellipsis
		&:after
			position: absolute
			width: 2px
			height: 2px
			right: 0
			border-radius: 50%
			bottom: 9px
			display: block
			content: ''
			border: thin solid $color-text-dark-hint

	.status-indicator+.name
		margin-left: 5px

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

option.invalid_task
	color: $color-danger
	background-color: hsl(hue($color-danger), 80%, 90%)