/* CSS for the bp/members block */
[data-type="bp/members"] {

	.components-placeholder {

		&.is-appender {
			min-height: 0;

			.components-placeholder__label:empty {
				display: none;
			}
		}

		input.components-placeholder__input {
			flex: 1 1 auto;
			border-radius: 2px;
			border: 1px solid #757575;
			padding: 6px 8px;
		}
	}

	&.avatar-none {

		.member-description {
			width: calc(100% - 44px);
		}
	}

	&.avatar-full {

		.member-description {
			width: calc(100% - 224px);
		}
	}

	&.avatar-thumb {

		.member-description {
			width: calc(100% - 114px);
		}
	}

	.member-content {
		position: relative;

		.is-right {
			position: absolute;
			top: 2px;
			right: 2px;
		}
	}

	.columns-2,
	.columns-3,
	.columns-4 {

		.member-content {

			.member-description {
				padding-left: 44px;
				width: calc(100% - 44px);
			}
		}
	}

	.columns-3 {

		.is-right {
			right: -10px;
		}
	}

	.columns-4 {

		.is-right {
			right: -50px;
		}
	}
}

.bp-block-members {

	&.is-grid {
		display: flex;
		flex-wrap: wrap;
		padding: 0;

		.member-content {
			margin: 0 1.25em 1.25em 0;
			width: 100%;
		}
	}

	@media (min-width: 600px) {

		@for $i from 2 through 4 {
			&.columns-#{ $i } .member-content {
				width: calc((100% / #{ $i }) - 1.25em + (1.25em / #{ $i }));

				&:nth-child( #{ $i }n ) {
					margin-right: 0;
				}
			}
		}
	}

	.member-content {
		display: flex;
		flex-direction: column;
		padding-bottom: 1em;
		text-align: center;

		.item-header-avatar,
		.member-description {
			width: 100%;
		}

		.item-header-avatar {
			margin: 0 auto;

			img.avatar {
				display: inline-block;
			}
		}

		@media (min-width: 600px) {
			flex-direction: row;
			text-align: left;

			.item-header-avatar,
			.member-description {
				width: auto;
			}

			.item-header-avatar {
				margin: 0;
			}
		}

		.user-nicename {
			display: block;

			a {
				color: currentColor;
				text-decoration: none;
				border: none;
			}
		}

		time {
			display: block;
			font-size: 80%;
			color: #767676;
		}
	}

	&.avatar-none {

		.item-header-avatar {
			display: none;
		}
	}

	&.avatar-full {
		min-height: 190px;

		.item-header-avatar {
			width: 180px;
		}
	}

	&.avatar-thumb {

		.member-content {
			min-height: 80px;
		}

		.item-header-avatar {
			width: 70px;
		}
	}

	&.columns-2 .member-content,
	&.columns-3 .member-content,
	&.columns-4 .member-content {
		display: block;
		text-align: center;

		.item-header-avatar {
			margin: 0 auto;
		}
	}

	img.avatar {
		width: auto;
		height: auto;
		max-width: fit-content;
	}

	.member-content.has-activity {
		align-items: center;

		.item-header-avatar {
			padding-right: 1em;
		}

		.wp-block-quote {
			margin-bottom: 0;
			text-align: left;

			cite a {
				color: currentColor;
				text-decoration: none;
				border: none;
			}
		}
	}
}

.entry .entry-content .bp-block-members .user-nicename {

	a {
		color: currentColor;
		text-decoration: none;
		border: none;
	}
}