#categories.component {
	width: 250px; overflow: hidden;
	
	border-radius: 3px;
	border: solid 1px;
	box-shadow:
		inset 1px 1px rgba(255,255,255,.5),
			  1px 1px rgba(255,255,255,.5);
	
	color: rgba(0,0,0,.2);
}

#categories.component > header { margin: 10px 15px 8px; }
#categories.component > header > h2 {
	padding: 0;
	color: #999;
	filter: drop-shadow(1px 1px rgba(255, 255, 255, 0.8));
}
#categories.component > header > h2:before { content: none; }

#categories.component > ul > li {
	border-top: solid 1px;
	padding-top: 1px;
	box-shadow: inset 0 1px rgba(255,255,255,.5);
}
#categories.component > ul > li > a {
	display: flex; height: 35px;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	
	padding: 0 15px;
	
	color: rgba(0,0,0,.35);
	
	cursor: pointer;
}
#categories.component > ul > li > a > span:last-child {
	display: block; width: 23px; height: 23px;
	
	border-radius: 50%;
	border: solid 1px rgba(0,0,0,.3);
	box-shadow:
		inset 1px 1px rgba(255,255,255,.5),
			  1px 1px rgba(255,255,255,.5);
	
	text-shadow: 1px 1px rgba(255,255,255,.5);
	
	text-align: center;
	line-height: 21px;
	font-weight: 400;
	font-size: 9px;
}

#categories.component > ul > li > a.active > span:first-child,
#categories.component > ul > li > a:hover > span:first-child { color: #B9236B; }
#categories.component > ul > li > a.active > span:last-child,
#categories.component > ul > li > a:hover > span:last-child {
	background-color: #B9236B;
	border:none;
	box-shadow: 1px 1px rgba(255,255,255,.3);
	
	text-shadow: none;
	
	line-height: 23px;
	color: #FBFBFB;
}