.item .flag {
	color: darken(@theme-list-item-bg, 20%);
	cursor: pointer;
	display: inline-block;
	height: 16px;
	margin-top: 5px;
	position: relative;
	text-align: center;
	vertical-align: bottom;
	width: 16px;

	.init-icon-font();
	.init-icon-font(after);
	
	&:before {
		content: "\e652";
		display: block;
		font-size: 20px;
		margin-left: -2px;
	}
	
	&:after {
		// checked
		color: #ffb736;
		content: "\e61f";
		display: block;
		font-size: 24px;
		height: 100%;
		margin: -22px 0 0 -4px;
		opacity: 0;
		visibility: hidden;
		width: 100%;

		.transform-origin(13px 13px);
		.transform(scale(0.8));

		-webkit-transition: -webkit-transform 200ms cubic-bezier(.4,.4,.6,4) 0s, opacity 100ms linear 100ms, visibility 0ms linear 300ms;
		-moz-transition: -moz-transform 200ms cubic-bezier(.4,.4,.6,4) 0s, opacity 100ms linear 100ms, visibility 0ms linear 300ms;
		-o-transition: -o-transform 200ms cubic-bezier(.4,.4,.6,4) 0s, opacity 100ms linear 100ms, visibility 0ms linear 300ms;
		transition: transform 200ms cubic-bezier(.4,.4,.6,4) 0s, opacity 100ms linear 100ms, visibility 0ms linear 300ms;
	}
}

.item.checked .flag:not(.partial):before {
	color:  desaturate(darken(@theme-list-checked-item-bg, 20%), 30%);
}

.item.selected .flag:not(.partial):before {
	color: desaturate(darken(@theme-list-selected-item-bg, 10%), 10%);
}

.use_threads .item .partial {
	color: #ffb736;
}

.item .flagged:after {
	opacity: 1;
	visibility: visible;

	-webkit-transition: -webkit-transform 200ms cubic-bezier(.4,.4,.6,4) 0s, visibility 0ms linear 0s;
	-moz-transition: -moz-transform 200ms cubic-bezier(.4,.4,.6,4) 0s, visibility 0ms linear 0s;
	-o-transition: -o-transform 200ms cubic-bezier(.4,.4,.6,4) 0s, visibility 0ms linear 0s;
	transition: transform 200ms cubic-bezier(.4,.4,.6,4) 0s, visibility 0ms linear 0s;

	.transform(scale(1));
}