#selections {
	background-color: $main-alternate-color;
	color: $main-alternate-text-color;
	font-size: 18pt;
	@include overflow-scroll;
//	height: 100%;

	$iconColumnWidth: 40px;
	$spacing: 5px;

	ul.defaultSet {
		font-weight: bold;
		padding-top: 10px;
		padding-bottom: 10px;

		li {
			&.allCards:before {
				content: "clipperz";
			}
			
			&.recentCards:before {
				content: "recent";
			}
			
			&.untaggedCards {
				padding-left: 70px;
			}
		}
	}

	.search {
		form {
			input {
				font-family: "clipperz-font";
				color: #999;
				font-size: 18pt;
				padding: 0px 30px;
				margin: 0px 5px;
//				width: $selectionPanelWidth - $iconColumnWidth - 10px;
				width: $selectionPanelWidth - ($spacing * 2);
			}

			label {
				@include icon-font();
				font-size: 18pt;
				padding-left: $spacing;
//				padding-right:5px;
				margin-left: -$selectionPanelWidth + $spacing;
				color: #666;
			}
		
			.searchClear {
				@include icon-font();
				@include border-radius(4px);
				background-color: #aaa;
				color: white;
				margin-left: $selectionPanelWidth - $iconColumnWidth - 30px;
				cursor: pointer;
				padding: 5px;
				font-size: 10pt;
			
				&:hover {
					background-color: #666;
				}
			}
		}

		.searchResultInfo {
//			color: #999;
			font-size: 10pt;
			padding: 2px 6px;
			display: none;

			label {
				padding-right: 3px;
			}
		}
	}

	ul.tagList {
		padding-top: 10px;

		li {
			&:before {
				content: "tag";
			}

			span.tagLabel {
			}
		
			span.tagCount {
				background-color: gray;
				font-size: 10pt;
				margin-left: 10px;
				padding: 0px 4px;
				@include border-radius(4px);
			}
		}
	}
	
	li {
		padding-left: 35px;
		text-indent: -35px;

		padding-top: 7px;
		padding-bottom: 7px;

		cursor: pointer;

		&:before {
			@include icon-font();
			font-weight: normal;
			padding-left: 8px;
			padding-right: 8px;
			font-size: 14pt;
		}
	}
	
	.showArchivedCards {
		font-size: 12pt;
		
		span.count {
			background-color: gray;
			font-size: 10pt;
			margin-left: 10px;
			padding: 0px 4px;
			@include border-radius(4px);
		}
	}
}


//$selectionColor: yellow;
$selectionColor: $clipperz-orange;

#selections.ALL {
	li.allCards {
		color: $selectionColor;
	}
}

#selections.RECENT {
	li.recentCards {
		color: $selectionColor;
	}
}

#selections.UNTAGGED {
	li.untaggedCards {
		color: $selectionColor;
	}
}

#selections.SEARCH {
	div.search {
		.searchResultInfo {
			color: $selectionColor;
			display: block;
		}
	}
}

#selections.TAG {
	ul.tagList {
		li.selected {
			color: $selectionColor;
		}
	}
}