.category-header {
	width: 100%;
	height: 110px;
	text-align: center;
	margin: 0;
	padding-top:25px;
	@include pointer;
	margin-bottom: 10px;
	overflow:hidden;

	&:hover {
		filter: brightness(115%);
		-webkit-filter: brightness(115%);
	}

	.category-box {
		height:90px;

		.post-preview {
			padding-left:10px;
			padding-right:10px;
			text-align:left;
			img {
				width:60px;
				height:60px;
				padding-right:5px;
			}

			p {
				overflow: hidden;
				text-overflow:ellipsis;
				height:60px;
			}
		}
	}
}

.category-header-image-auto {
	-webkit-background-size: auto!important;
	-moz-background-size: auto!important;
	-o-background-size: auto!important;
	background-size: auto!important;
	background-position: 0% 0% !important;
}

.category-header-image-cover {
	-webkit-background-size: cover!important;
	-moz-background-size: cover!important;
	-o-background-size: cover!important;
	background-size: cover!important;
	background-position: center!important;
}

.category-header-image-contain {
	-webkit-background-size: contain!important;
	-moz-background-size: contain!important;
	-o-background-size: contain!important;
	background-size: contain!important;
	background-position: center!important;
}


.topic-list {
	.category-item {
		-webkit-box-shadow: inset 0px 0px 2px 2px #ffffff;
		box-shadow: inset 0px 0px 2px 2px #ffffff;
		-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.3);
		box-shadow: 0 1px 2px rgba(0,0,0,0.3);
		&.unread {
			border-left: 2px solid $primary;
			margin-left: -2px;
		}
	}
}

.category-item {
	[component="topic/select"] {
		line-height: 55px;
	}

	.category-box {
		margin-top: -10px;

		.category-info {
			background: $card-cap-bg;
			border-bottom: 1px solid $card-cap-bg;
		}
	}
	// arrow inside category box
	.category-box:after, .category-box:before {
		bottom: 100%;
		left: 10%;
		border: solid transparent;
		content: " ";
		height: 0;
		width: 0;
		position: absolute;
		pointer-events: none;
	}
	.category-box:after {
		border-color: rgba(140, 113, 242, 0);
		border-bottom-color: $card-cap-bg;
		border-width: 10px;
		margin-left: -10px;
	}
	.category-box:before {
		border-color: rgba(122, 98, 211, 0);
		border-width: 12px;
		margin-left: -12px;
	}

	.post-preview {
		border-bottom: 1px dashed $border-color;
		&:last-child {
			border-bottom: none;
		}

		.post-preview-content {
			max-height: 250px;
			img {
				display: block;
				max-width: 100%;
				height: auto;
			}
		}
	}
}