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

	border-top: thick solid $color-warning

	.item-name
		font-size: 1.6em

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

.status-indicator
	background-color: white
	width: 16px
	height: 16px
	margin-left: 10px
	border-radius: 50%
	transition: all 100ms ease-in-out

.task-list-item
	border-right: 5px solid transparent
	color: $color-primary-dark
	transition: all 150ms ease-in-out

	&:hover
		text-decoration: none
		color: $color-primary

		.status-indicator
			transform: scale(1.1)

	&.active
		border-color: $color-background-dark
		border-right-color: $color-primary
		text-decoration: none
		background-color: rgba($color-background, .5)

		.status-indicator
			transform: scale(1.1)

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

	.type
		margin-left: auto
		color: $color-text-dark-primary
	.status

	.name
		margin: 10px

	&.status
		&-invalid
			.status-indicator
				background-color: hsl(hue($color-status-invalid), 100%, 75%)
			.status
				color: hsl(hue($color-status-invalid), 100%, 50%)
		&-todo
			.status-indicator
				background-color: hsl(hue($color-status-todo), 100%, 75%)
			.status
				color: hsl(hue($color-status-todo), 100%, 50%)
		&-in_progress
			.status-indicator
				background-color: hsl(hue($color-status-in_progress), 100%, 60%)
			.status
				color: hsl(hue($color-status-in_progress), 100%, 45%)
		&-on_hold
			.status-indicator
				background-color: hsl(hue($color-status-on_hold), 100%, 75%)
			.status
				color: hsl(hue($color-status-on_hold), 100%, 50%)
		&-approved
			.status-indicator
				background-color: hsl(hue($color-status-approved), 100%, 75%)
			.status
				color: hsl(hue($color-status-approved), 100%, 50%)
		&-cbb
			.status-indicator
				background-color: hsl(hue($color-status-cbb), 100%, 75%)
			.status
				color: hsl(hue($color-status-cbb), 100%, 40%)
		&-final
			.status-indicator
				background-color: hsl(hue($color-status-final), 100%, 40%)
			.status
				color: hsl(hue($color-status-final), 100%, 30%)
		&-review
			.status-indicator
				background-color: hsl(hue($color-status-review), 100%, 75%)
			.status
				color: hsl(hue($color-status-review), 100%, 50%)

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

.task-list-header
	border-right: thin solid $color-background
	a
		color: $color-text-dark
	a.task-project
		color: $color-text-dark-secondary
		margin-left: 10px

.input-group-separator
	margin: 10px 0
	border-top: thin solid $color-background