// 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;
		}
	}
	button.circle { width: 36px; height: 36px; }
	button.task-done i { margin-top: 1px; margin-left: -3px; }
	button.task-failed i { margin-top: 1px; margin-left: -1px; }
	.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; }
	button { background-color: @white}
	a.mixed-circle { height: 36px; color: @medium-gray; }
	button.mixed-circle {  border: none; padding: 0px; height: 36px;}
	a:hover, button:hover { background-color: @light-gray; cursor: pointer;}
	a.mixed-circle:hover, button.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, button.task-accepted:hover { background-color: lighten(@green, 20%); }
	
	.circle.task-failed {
		border: 4px solid @red;
	}
	a.circle.task-failed i { color: @red; margin-top: 2px;}
	button.circle.task-failed i { color: @red; margin-top: 1px;}
	
	.half-circle.task-failed { border-color: @red; }
	a.task-failed:hover, button.task-failed:hover { background-color: lighten(@red, 20%); }
	.mixed-circle.task-failed { color: @red; }
	button.mixed-circle.task-failed i { margin-right: 2px; margin-top: 0px; }
	
	.circle.task-flaged {
		border: 4px solid @yellow;
		i { color: @yellow; }
	}
	.half-circle.task-flaged { border-color: @yellow; }
	a.task-flaged:hover, button.task-flaged:hover { background-color: lighten(@yellow, 20%); }
	
	.task-retrys {
		color: @red;
	     position: relative;
	     left: 34px;
	     top: -9px;
	     text-align: left;
	     font-family: Avenir-Black;
	     font-size: 8px;
	     line-height: 11px;
	}
	.task-retrys.task-done { color: @medium-gray; }
	.task-retrys.task-accepted { color: @green; }
	.task-retrys.task-failed { color: @red; }
	.task-retrys.flaged { top: -28px;}
	
}