@import _config
@import _utils

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

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

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

.task-list-item
	border-right: 5px solid transparent
	color: $color-primary-dark
	background-image: white
	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: rotate(45deg)
			border-radius: 15%

	&.processing
		+stripes($color-background, rgba($color-background, .5), -45deg, 25px)
		+stripes-animate
		animation-duration: 2s

	.status
		display: inline-block
		margin-left: auto
		margin-right: 10px
		color: $color-text-dark-secondary
		text-transform: uppercase
		font-size: .8em
		text-decoration: none

#task-details
	margin: 10px
	padding: 0 10px 10px
	+container-box

#task-view
	width: 100%

	.task-name
		font-size: 1.6em

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