.bb-rl-topics-list-body {
	padding: 0;
}

.bb-rl-topics-list {
	margin: 0;
	padding: 0;
	list-style: none;

	.type-topic {
		background-color: var(--bb-rl-background-color);
		border: 1px solid var(--bb-rl-border-secondary-color);
		border-radius: var(--bb-rl-radius-lg);
		padding: var(--bb-rl-space-300);
		display: flex;
		align-items: flex-start;
		gap: var(--bb-rl-space-200);
		margin-bottom: var(--bb-rl-space-200);

		.bb-rl-topic-avatar {
			width: 48px;
			height: 48px;
			flex-shrink: 0;

			img {
				height: 100%;
				width: 100%;
				object-fit: cover;
				border-radius: var(--bb-rl-radius-full);
			}

			.bbp-author-name {
				display: none;
			}
		}

		.bb-rl-topic-content {
			flex: 1;
			position: relative;
			min-width: 0;
			width: 100%;
		}

		.bb-rl-topic-status-wrapper {
			display: flex;
			align-items: center;
			gap: var(--bb-rl-space-100);
			position: absolute;
			top: 0;
			right: 0;
			z-index: 1;
			line-height: 1;

			.bb-rl-topic-state {
				color: var(--bb-rl-icon-secondary-color);
				font-size: 20px;
			}
		}

		.bb-rl-topic-title {

			@include bb-rl-base-heading-bolder;
			margin-bottom: var(--bb-rl-space-100);
			max-width: calc(100% - 100px);
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;

			a {
				color: var(--bb-rl-text-color);

				&:hover {
					text-decoration: underline;
				}
			}
		}

		.bb-rl-topic-description {
			font-size: var(--bb-rl-font-size-sm);
			line-height: var(--bb-rl-base-line-small);
			color: var(--bb-rl-text-color);
			margin-bottom: var(--bb-rl-space-100);
		}
	}

	.bb-rl-topic-footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: var(--bb-rl-space-200);
	}

	.bb-rl-topic-meta {
		display: flex;
		align-items: center;

		.favorite-toggle {
			display: none;
		}
	}

	.bb-rl-row-actions:has(.favorite-toggle) + .bb-rl-topic-meta-item:before {
		display: none;
	}

	.bb-rl-topic-meta-item {
		display: flex;
		align-items: center;
		font-size: var(--bb-rl-font-size-sm);
		color: var(--bb-rl-text-secondary-color);

		a {
			color: var(--bb-rl-text-secondary-color);
		}

		&:not(:first-child) {

			&:before {
				content: "";
				height: 4px;
				width: 4px;
				background-color: var(--bb-rl-background-tertiary-color);
				border-radius: var(--bb-rl-radius-full);
				margin: 0 var(--bb-rl-space-100);
			}
		}
	}
}

.bb-rl-topic-stats {
	display: flex;
	align-items: center;
	gap: var(--bb-rl-space-200);

	> div {
		color: var(--bb-rl-text-secondary-color);
		font-size: 14px;
		font-weight: 500;
		display: flex;
		align-items: center;
		gap: var(--bb-rl-space-50);

		i {
			font-size: 20px;
			color: var(--bb-rl-icon-secondary-color);
		}
	}
}

.bb-rl-topic-started-in {
	display: inline-block;
	border: 1px solid var(--bb-rl-border-tertiary-color);
	border-radius: var(--bb-rl-radius-base);
	padding: 6px var(--bb-rl-space-100);
	color: var(--bb-rl-text-color);
	font-size: var(--bb-rl-font-size-sm);
	font-weight: 500;
	line-height: var(--bb-rl-base-line-small);
	margin-bottom: var(--bb-rl-space-100);

	a {
		display: flex;
		align-items: center;
		gap: var(--bb-rl-space-100);
		color: var(--bb-rl-text-color);

		img {
			border-radius: var(--bb-rl-radius-sm);
		}
	}
}

.bb-rl-topic-started-by {

	a.bbp-author-link {
		color: var(--bb-rl-text-color);
		font-weight: 500;
	}

	.bbp-author-avatar {
		display: none;
	}
}

@media screen and (max-width: 782px) {

	.bb-forums-topics-page .bb-rl-container-inner {
		padding: 0;
	}

	.bb-rl-topics-list .type-topic {
		padding: var(--bb-rl-space-200);
	}
}

@media screen and (max-width: $sm) {

	.bb-rl-topics-list .type-topic {
		flex-direction: column;
		position: relative;

		.bb-rl-topic-content {
			position: static;
		}

		.bb-rl-topic-title {
			width: 1000;
			max-width: 100%;
			white-space: normal;
			overflow: visible;
			text-overflow: unset;
		}

		.bb-rl-topic-status-wrapper {
			top: var(--bb-rl-space-200);
			right: var(--bb-rl-space-200);
		}
	}
}
