.forum-list {
	list-style-type: none;
	margin: 0;
	padding: 0;
	
	& > li {
		padding: rem(15px);
		
		@include clearfix();
		
		& + li {
			border-top: 2px solid $gray-300;
		}
		& .media {
			font-size: $font-size-lg * 2;
			float: left;
			width: rem(64px);
			text-align: center;
			line-height: rem(64px);
			
			@include media-breakpoint-down(lg) {
				width: rem(48px);
				line-height: rem(48px);
				font-size: $font-size-lg * 1.5;
			}
			
			& img {
				max-width: 100%;
				display: block;
			}
			& .fa {
				display: block;
				background: $primary;
				line-height: rem(64px);
				
				@include media-breakpoint-down(lg) {
					line-height: rem(48px);
				}
			}
		}
		& .info-container {
			margin-left: rem(79px);
			font-size: $font-size-sm;
			line-height: $line-height-lg;
			color: $gray-600;
			
			@include display-flex();
			@include media-breakpoint-down(lg) {
				display: block;
				margin-left: rem(63px);
			}
			
			& .info {
				width: 50%;
				
				@include flex(1);
				@include media-breakpoint-down(lg) {
					width: auto;
				}
				
				& .title {
					font-size: $font-size-lg;
					font-weight: 600;
					line-height: inherit;
					margin: 0;
					
					& a {
						color: $dark;
						
						&:hover,
						&:focus {
							color: lighten($dark, 15%);
						}
					}
				}
				& .desc {
					margin-bottom: rem(10px);
					
					@include media-breakpoint-down(lg) {
						margin-bottom: 0;
					}
				}
			}
			& .total-count {
				width: 20%;
				text-align: center;
				color: $gray-600;
				font-size: $font-size-base;
				font-weight: 400;
				
				@include media-breakpoint-down(lg) {
					width: auto;
					text-align: left;
					margin: rem(5px) 0;
				}
				
				& .total-post {
					font-weight: 600;
					color: $dark;
				}
				& .divider {
					margin: 0 rem(5px);
				}
			}
			& .latest-post {
				width: 30%;
				
				@include media-breakpoint-down(lg) {
					width: auto;
				}
			
				& a {
					color: $primary;
					
					&:hover,
					&:focus {
						color: darken($primary, 15%);
					}
				}
				& .title {
					font-size: $font-size-sm;
					line-height: inherit;
					margin: 0;
					
					& a {
						color: $dark;
					}
				}
				& .time {
					font-size: $font-size-sm;
					margin: 0;
				}
			}
		}
	}
	&.forum-topic-list {
		& .info-container {
			position: relative;
		}
		& .info-start-end {
			list-style-type: none;
			margin: 0;
			padding: 0;
			font-size: $font-size-sm * 0.9;
		}
		& .date-replies {
			text-align: center;
			width: rem(80px);
			
			@include media-breakpoint-down(lg) {
				width: auto;
				text-align: left;
				line-height: $line-height-sm;
				margin: rem(10px) 0 0;
			}
			
			& .time {
				font-size: $font-size-sm * 0.9;
				margin-bottom: rem(10px);
				color: $gray-600;
				
				@include media-breakpoint-down(lg) {
					display: inline-block;
					margin-bottom: 0;
					
					& + .replies {
						padding-left: rem(13px);
						margin-left: rem(10px);
						border-left: 1px solid $gray-300;
					}
				}
			}
			& .replies {
				background: lighten($gray-200, 2%);
				padding: rem(5px) rem(10px);
				
				@include border-radius($border-radius);
				@include media-breakpoint-down(lg) {
					background: none;
					padding: 0;
					display: inline-block;
					
					@include border-radius(0);
				}
				
				& .total {
					font-size: $font-size-lg;
					font-weight: 600;
					color: $dark;
					margin: 0;
					
					@include media-breakpoint-down(lg) {
						display: inline;
						font-size: $font-size-sm * 0.9;
					}
				}
				& .text {
					font-size: $font-size-sm * 0.9;
					font-weight: 600;
					color: $gray-600;
					
					@include media-breakpoint-down(lg) {
						display: inline;
					}
				}
			}
		}
	}
	&.forum-detail-list {
		border: none;
		margin-bottom: rem(20px);
		
		& > li {
			padding: 0;
			
			& + li {
				border: none;
				margin-top: rem(20px);
			}
		}
		& .media {
			display: block;
			
			& img {
				margin-bottom: rem(10px);
			}
			& .badge {
				font-size: $font-size-sm * 0.9;
				display: block;
				padding: rem(4px) rem(6px);
				font-weight: 500;
				
				@include border-radius($border-radius-sm);
			}
		}
		& .info-container {
			border: 2px solid $gray-300;
			padding: rem(15px) rem(20px);
			background: $gray-100;
			position: relative;
			display: block;
			
			@include border-radius($border-radius-lg);
			
			&:before,
			&:after {
				content: '';
				position: absolute;
				left: rem(-20px);
				top: rem(20px);
				border: 10px solid transparent;
				border-right-color: $gray-300;
			}
			&:after {
				left: rem(-17px);
				border-right-color: $gray-100;
			}
			& > div {
				float: none;
			}
			& .post-user {
				font-size: $font-size-base;
				margin-bottom: rem(15px);
				
				& small {
					font-weight: bold;
					color: $gray-500;
					font-size: $font-size-base * 0.8;
					margin-left: rem(5px);
				}
			}
			& .post-content {
				font-size: $font-size-base;
				line-height: $line-height-base;
				color: $dark;
				margin-bottom: 15px;
				
				& pre {
					background: $gray-200;
					border: none;
					margin-bottom: rem(20px);
					padding: rem(15px);
					
					@include border-radius($border-radius);
				}
			}
			& .post-time {
				color: $gray-500;
			}
		}
	}
}