.category-list {
	padding: 0;

	li {
		.inline-block;
		.pointer;
		padding: 0.5em;
		margin: 0.25em;
		.border-radius(3px);

		&.disabled {
			background-color: #888!important;
			.opacity(0.5);
		}
	}
}

.user-list {
	padding-left: 2rem;
	padding-top: 1rem;

	li {
		.pointer;
		display: inline-block;
		list-style-type: none;
		padding: 0.5rem 1rem;

		&:hover {
			background: #eee;
		}

		img, .user-icon {
			.user-icon-style(36px, 1.8rem);
			float: left;
			margin-right: 1rem;
		}

		span {
			vertical-align: middle;
			display: inline-block;
		}
	}
}

.user-icon {
	display: inline-block;
	text-align: center;
	color: @gray-lighter;
	font-weight: normal;

	&:before {
		content: '';
		display: inline-block;
		height: 100%;
		vertical-align: middle;
	}
}

.avatar {
	/* Contains the user icon class as a mixin, so there's no need to include that in the template */
	.user-icon;

	&.avatar-sm {
		width: 24px;
		height: 24px;
		.user-icon-style(24px, 1.5rem);
	}

	&.avatar-lg {
		width: 128px;
		height: 128px;
		.user-icon-style(128px, 7.5rem);
	}

	&.avatar-rounded {
		border-radius: 50%;
	}
}