.bb-rl-groups {

	.bp-list.grid {

		.item-entry {

			.list-wrap {
				padding: 0;
				display: flex;
				flex-direction: column;
			}

			.item {
				padding: 0 var(--bb-rl-space-200) var(--bb-rl-space-300);
				flex: 1;
				display: flex;
				flex-direction: column;
			}

			.group-item-wrap {
				margin-bottom: var(--bb-rl-space-200);
			}

			.group-footer-wrap {
				margin: auto 0 0;
				flex-direction: column;
				align-items: flex-start;
			}

			.groups-loop-buttons {
				margin-top: var(--bb-rl-space-200);
			}
		}

		.group-avatar-wrap {
			position: relative;
			display: inline-block;
			margin-top: calc(-1 * var(--bb-rl-space-400));
			margin-left: var(--bb-rl-space-200);
		}

		&.bb-cover-disabled {

			.group-avatar-wrap {
				margin-top: var(--bb-rl-space-200);
			}
		}

		.bs-group-cover {

			a {
				position: relative;
				display: block;
				height: 100%;
				padding-top: 104px;
				border-radius: var(--bb-rl-radius-lg) var(--bb-rl-radius-lg) 0 0;
				overflow: hidden;
			}

			img {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				object-fit: cover;
				height: 100%;
				width: 100%;
			}

		}
	}

	.bp-list:not(.grid) {

		.item-entry {

			.list-wrap {
				display: flex;
				align-items: center;
				padding: var(--bb-rl-space-400) var(--bb-rl-space-300);

				@media screen and (max-width: $sm) {
					flex-direction: column;
					align-items: flex-start;
					gap: var(--bb-rl-space-100);
				}
			}

			.item-avatar {
				margin-right: var(--bb-rl-space-200);
			}

			.item {
				display: flex;
				align-items: center;
				flex: 1;

				@media screen and (max-width: 768px) {
					flex-direction: column;
					align-items: flex-start;
					gap: var(--bb-rl-space-100);
				}
			}

			.group-footer-wrap {
				display: flex;
				align-items: center;
				gap: var(--bb-rl-space-200);

				@media screen and (max-width: 768px) {
					margin-left: 0;
				}

				@media screen and (max-width: $sm) {
					flex-direction: column;
					align-items: flex-start;
				}
			}
		}
	}

	.item-entry {

		.list-wrap {
			position: relative;
			height: 100%;
			border-radius: var(--bb-rl-radius-lg);
			background-color: var(--bb-rl-background-color);
			border: 1px solid var(--bb-rl-border-secondary-color);
		}

		.avatar {
			max-width: 80px;
			height: auto;
			border-radius: var(--bb-rl-radius-lg);
			border: 1px solid rgba(0, 0, 0, 0.08);
		}

		.groups-title {

			@include bb-rl-base-heading;
			margin-bottom: var(--bb-rl-space-50);
		}

		.item-meta-wrap {
			display: flex;
			align-items: center;
			flex-flow: wrap;
		}

		.item-meta {

			@include bb-rl-label-heading-bolder;
			color: var(--bb-rl-text-tertiary-color);
		}

		.group-item-desc {
			display: none;
		}

		.group-footer-wrap {
			margin-left: auto;

			button,
			.generic-button a {

				@include bb-rl-button;
				@include bb-rl-button-secondary-fill;
				font-size: var(--bb-rl-font-size-sm);
				padding: var(--bb-rl-space-50) var(--bb-rl-space-200);
				white-space: nowrap;

				&.group-button {

					&::before {
						content: "";
						display: inline-block;
						margin-right: var(--bb-rl-space-50);
						font-weight: 400;
						font-family: bb-icons-rl;
						font-size: 16px;
						line-height: 1;
						color: var(--bb-rl-icon-secondary-color);
						font-style: normal;
					}

					&.join-group::before {
						content: "\e3d4";
					}

					&.request-membership::before {
						content: "\e2fe";
					}

					&.membership-requested::before {
						content: "\e182";
					}

					&.membership-requested.bp-toggle-action-button-clicked::before {
						content: "\e2fe";
					}
				}

				&.membership-requested {

					@include bb-rl-button--secondary-outline;
				}
			}

			.generic-button {

				.group-button.bp-toggle-action-button {

					&.leave-group::before {
						content: "\e182";
						display: inline-block;
						margin-right: var(--bb-rl-space-50);
						font-weight: 400;
						font-family: bb-icons-rl;
						font-size: 16px;
						line-height: 1;
						color: var(--bb-rl-icon-secondary-color);
						font-style: normal;
					}
				}
			}
		}

		.bb-group-members {
			display: flex;
			margin-bottom: 0;
			padding-right: 10px;
			margin-right: 5px;

			.bb-group-member {
				max-width: 24px;
				min-width: 24px;
				float: left;
				margin-right: -4px;
				position: relative;
				z-index: 1;

				a {
					text-decoration: none;
				}

				img {
					background-color: #fff;
					border-radius: 50%;
					float: left;
					max-width: 100%;
					image-rendering: -webkit-optimize-contrast;
					display: block;
				}

				[class*=" bb-icon-"] {
					height: 24px;
					width: 24px;
					font-size: 16px;
					color: #c3c4c8;
					line-height: 24px;
					border-radius: 50%;
					background-color: #f9f9f9;
					border: 2px solid #fff;
					display: flex;
					align-items: center;
					-webkit-box-pack: center;
					-ms-flex-pack: center;
					justify-content: center;

					&:hover {
						background-color: #e3e3e3;
					}
				}
			}

			.bb-group-member.count-wrap {
				margin-left: 8px;
				max-width: none;

				a {

					@include bb-rl-label-heading-bolder;
					color: var(--bb-rl-text-tertiary-color);
					white-space: nowrap;
				}
			}
		}
	}

	.item-list.grid {

		.only-list-view {
			display: none;
		}
	}

	.item-list:not(.grid) {

		.only-grid-view {
			display: none;
		}
	}
}

.bb-rl-group-block {

	.item-meta-wrap {

		p > span + span {

			&::before {
				content: "\2022";
				display: inline-block;
				margin: 0 6px 0 3px;
				color: var(--bb-rl-background-tertiary-color);
			}
		}

		p + p.last-activity {

			&::before {
				content: "\2022";
				display: inline-block;
				margin: 0 6px 0 3px;
				color: var(--bb-rl-background-tertiary-color);
			}
		}
	}
}
