// Task Checkbox

@import "colors.less";

.task-checkbox {
	width: 32px;
	height: 32px;
     float: right;
     margin-left: 15px;
	.circle {
		width: 28px;
		height: 28px;
		border: 4px solid @medium-gray;
		border-radius: 32px;
		i {
			font-size: 24px;
			margin-top: 3px;
			color: @medium-gray;
		}
	}
	.half-circle {
		width: 28px;
		height: 14px;
		border: 4px solid @medium-gray;
	}
	.half-circle.top {
		border-top-left-radius: 110px;
		border-top-right-radius: 110px;
		border-bottom: 0;
	}
	.half-circle.bottom {
		border-bottom-left-radius: 110px;
		border-bottom-right-radius: 110px;
		border-top: 0;
	}
	.mixed-circle i {
		position: relative;
		font-size: 24px;
	}
	.mixed-circle.task-accepted i { top: -28px; left: 3px; }
	.mixed-circle.task-failed i { top: -29px; left: 3px; }
	.flag {
		position: relative;
		top: -45px;
		left: 20px;
		color: @yellow;
		font-size: 14px;
	}
	
	a { display: block; }
	a.mixed-circle { height: 36px; color: @medium-gray; }
	a:hover { background-color: @light-gray; cursor: pointer;}
	a.mixed-circle:hover { border-radius: 300px; }
	
	.circle.task-done.task-accepted {
		border: 4px solid @green;
		i { color: @green; }
	}
	.half-circle.task-accepted { border-color: @green; }
	a.task-accepted:hover { background-color: lighten(@green, 20%); }
	
	.circle.task-failed {
		border: 4px solid @red;
		i { color: @red; margin-top: 2px;}
	}
	.half-circle.task-failed { border-color: @red; }
	a.task-failed:hover { background-color: lighten(@red, 20%); }
	a.mixed-circle.task-failed { color: @red; }
	
	.circle.task-flaged {
		border: 4px solid @yellow;
		i { color: @yellow; }
	}
	.half-circle.task-flaged { border-color: @yellow; }
	a.task-flaged:hover { background-color: lighten(@yellow, 20%); }
	
}