// BP Generic elements, Typography and Images.
// @version 3.0.0

// ========= Generic Sitewide elements ========
body {

	#buddypress { // needs the weight of the id here

		// CSS Box Model - some themes will set all blocks to border box
		// some will cherry pick - we will set elements as we need to,
		// ( setting a global change might be better)
		// box-modal() defaults to 'border-box' if no param passed
		.bp-list .action {

			@include box-model();
		}
	}
}

// Some themes have very restricted content widths for pages
// or entry-content (2013, 2014, 2017) Lets adjust these restrictions
body.buddypress {

	@include medium-up() {

		.entry-header,
		.site-content .entry-header,
		.entry-content {
			max-width: none;
		}

		.entry-header {
			float: none;
			max-width: none;
		}

		.entry-content {
			float: none;
			max-width: none;
			//padding: 0 $pad-xlrg;
		}

		// 2017 has a very large top padding we'll reduce that for bp screens
		.site-content {
			padding-top: 2.5em;
		}

		#content{
			margin-top: 0;
		}

		// Some themes are styling on ID's making it hard to override
		// Adding a commononly used ID for site here to add weight '#page'
		// In part this will help with 2017 floats & narrow widths


		#page {

			// If 2017 page choice is 'One Column' #primary is a narrow width
			// Current RC has removed the customizer column switch !!
			// remove width to allow BP screens to mirror post layout widths
			// The .wrap element will serve still to provide a max width @ 1000px

			#primary {
				max-width: none;

				.entry-header,
				.entry-content {
					float: none;
					width: auto;
				}
			}
		}


	} // @media
}

// BP Theme Compatibility isn't technically a theme and has to
// inherit and move over for a themes styles so with generic styling of
// elements we have limited scope

// Ensure themes can't cause issues with headings.
body.buddypress { // add weight

	.main-content { // just for content headings

		h1,
		h2,
		h3,
		h4,
		h5,
		h6 {
			clear: none;
			// some themes set massive margins ensure we avoid these in bp elements
			margin: 1em 0;
			// some themes add padding top lets manage that generically sitewide
			padding: 0;
		}
	}
}

// Ensure the .bp-wrap element always contains it's children,
// this may cause issues but groups single requires it.

/* Ensure .bp-wrap encloses it's children */

@include clearfix-element(".bp-wrap");

// General site avatars round or square ?
// User set
.buddypress-wrap.round-avatars {

	.avatar {
		border-radius: 50%;
	}
}

// ====== BP Typographic Elements ======

// === Font sizing ===


// Directory component titles, groups/user single, create & register
// Entry headers are outside the BP injection point for pages.
// & get styles by the theme, we'll attempt to over specify
// the selector to ensure we target the right elements
// (no BP classes available other than body classes!)

body.buddypress {

	article.page {

		> .entry-header {
			margin-bottom: 2em;
			padding: 0;

			.entry-title {

				@include responsive-font(34);
				font-weight: inherit;
				color: $primary-headings;
			}
		}
	}
}

// wrap block in bp content region class,
// avoid styles filtering through
// to site areas such as sidebars/footers etc.
.buddypress-wrap {

	dt.section-title {

		@include responsive-font(22);
	}

	.bp-label-text,
	.message-threads {

		@include responsive-font(14);
	}

	.activity-header {

		@include responsive-font(14);
	}

	.activity-inner {

		@include responsive-font(14);
	}

	#whats-new-post-in {

		@include font-size(14);
	}

	.mini .activity-header,
	.acomment-meta {

		@include font-size(13);
	}

	.dir-component-filters {

		#activity-filter-by {

			@include responsive-font(14);
		}
	}

	$search-element-size: 15;
	$search-element-button-size: $search-element-size + 5;

	.bp-tables-user {

		th {

			@include responsive-font(14);
		}

		td {

			@include responsive-font(14);
		}
	}

	// Setting the profile fields to be a larger
	// font than all general user tables is open for review.
	.profile-fields {

		th {

			@include responsive-font(16);
		}

		td {

			@include responsive-font(14);
		}
	}

	#notification-select {

		@include responsive-font(14);
	}
}
