// BP Single Group Header Styles.
// @since 3.0.0
// @version 7.0.0

.groups-header {

	.bp-group-type-list {

		@include font-size(18);
		margin: 0;
		color: $black;
		display: flex;

		strong {
			padding-right: $pad-med;
			white-space: nowrap;
		}
	}

	.bp-feedback {
		clear: both;
	}

	// groups admin/mod wrapper block
	.group-item-actions {
		float: left;
		margin: 0 0 15px 15px;
		padding-top: 0;
		width: 100%;
	}


	// The admin & mod list display for a group.
	// 'moderators-lists' is used to refer to
	// generic members with elevated access.
	.moderators-lists {
		margin-top: 0;

		.moderators-title {

			@include font-size(14);
		}

		.user-list {
			margin: 0 0 $marg-xsml;

			ul:after {
				clear: both;
				content: "";
				display: table;
			}

			li {
				display: inline-block;
				float: none;
				margin-left: 4px;
				padding: 4px;
			}

			// Bottom Left Tooltip for mobile and Bottom Right Tooltip for tablet/desktop
			.bp-tooltip {

				@include bp-tooltip-bottom-left;

				@include medium-up() {

					@include bp-tooltip-bottom-right;
				}
			}
		}

		img.avatar {

			@include box-shadow-none();
			float: none;
			height: 30px;
			margin: 0;
			max-width: 100%;
			width: 30px;
		}
	} // close moderators-lists

	@include medium-up {

		div#item-header-content {
			float: left;
			margin-left: 10%;
			text-align: left;
			padding-top: $marg-med;
			width: 42%;
		}

		.group-item-actions {
			float: right;
			margin: 0 0 15px 15px;
			text-align: right;
			width: 20%;
		}

		.groups-meta {
			clear: both;
		}
	}

	.desc-wrap {
		background: $light-grey;
		border: 1px solid $med-light-grey;
		margin: 0 0 $marg-med;
		padding: $pad-med;
		text-align: center;

		.group-description {
			background: $off-white;

			@include box-shadow(inset 0 0 9px $primary-grey);
			padding: $pad-med;
			text-align: left;

			p {
				margin: 0;
				padding: 0;
			}
		}
	}
} // close groups-header