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

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

.bp-block-group {
	position: relative;

	.group-content {
		display: flex;
	}

	.group-description {
		width: 100%;
	}

	.group-description-content {
		width: 100%;
		margin-bottom: 18px;
	}

	.bp-profile-button {
		width: 100%;
		overflow: hidden;

		a.button {
			margin: 18px 0 0;
		}
	}

	&.has-cover {

		.group-content,
		.item-header-avatar,
		.group-description {
			z-index: 2;
		}

		.group-content {
			padding-top: 75px;
		}

		.group-description {
			padding-top: 75px;
		}

		.bp-group-cover-image {
			background-color: #c5c5c5;
			background-position: center top;
			background-repeat: no-repeat;
			background-size: cover;
			border: 0;
			display: block;
			left: 0;
			margin: 0;
			padding: 0;
			position: absolute;
			top: 0;
			width: 100%;
			z-index: 1;
			height: 150px;
		}
	}

	img.avatar {
		width: auto;
		height: auto;
	}

	&.avatar-none {

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

	&.avatar-none.has-cover {
		min-height: 200px;

		.item-header-avatar {
			padding-top: 75px;
		}
	}

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

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

		.group-description {
			padding-left: 35px;
		}
	}

	&.avatar-full.has-cover {
		min-height: 300px;

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

		img.avatar {
			border: solid 2px #fff;
			background: rgba(255, 255, 255, 0.8);
			margin-left: 20px;
		}
	}

	&.avatar-thumb {

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

			img.avatar {
				margin-top: 15px;
			}
		}
	}

	&.avatar-thumb:not(.has-description) {

		.group-content {
			min-height: 50px;
			align-items: center;
		}
	}

	&.avatar-thumb.has-cover {

		.item-header-avatar {
			padding-top: 75px;
		}
	}

	&.has-description {

		.bp-profile-button {

			a.button {
				display: block;
				float: right;
			}
		}
	}
}