// BP Layouts
// Layouts provides classes to handle specific module
// layouts on a user selectable basis.
// The sheet also adds layout properties such as border-box
// @version 3.0.0

#item-body,
.single-screen-navs {

	@include box-model();
}


// ==== The Grid Layout Classes ====

// BP Lists (loops) may be suited to a grid layout e.g members loops
// These classes added to the elements will provide these styles.

.grid {
	// the parent element (usually the ul)

	> li,
	> li .generic-button a {

		@include box-model( border-box );
	}

	> li {
		float: left;
		border-bottom: 0;
		margin: 10px 0;
		padding: 0;

		.list-wrap {
			border: 1px solid $bp-border-color;
			position: relative;
			overflow: hidden;
			padding-top: 14px;
			border-radius: 5px;

			.list-title {
				padding: $pad-sml;
			}

			.update {
				color: $meta-text;
				padding: $pad-sml $pad-lrg;
			}
		}
	} // close > li

	// min-height rules to line up grid box elements
	// to prevent breaking grid layout through uneven heights
	// one column or single column mobile can have varying heights

	@include small-up() {

		&.members-list,
		&.members-group-list,
		&.blogs-list{

			.list-wrap {
				//min-height: 380px;

				.item-block {
					margin: 0 auto;
				}
			}
		}

		&.groups-list {

			.list-wrap {
				//min-height: 450px;

				.group-desc {
					margin: $marg-med auto 0;
					overflow: hidden;
				}

				.last-activity,
				.group-details,
				.item-desc {
					margin-bottom: 0;

					p {
						margin-bottom: 0;
					}
				}
			}
		}
	} // close @media small-up

} // close .grid

/* Build the two column class small up */

@include small-up() {

	// Set the column  or item numbers to span horizontally
	.grid {
		// margin-left: -10px;
    // margin-right: -10px;
    // width: calc(100% + 20px);

    width: 100%;

		.buddypress-wrap &.two.bp-list {
			> li {
				.item-avatar {
					img.avatar {
						width: 120px;
					}
				}
			}
		}

		&.two,
		&.three {

			> li {
				width: 50%;

				.item {
					margin: 1rem auto 0;
					width: 80%;

					.item-title {
						width: auto;
					}
				}
			} // close > li
		}
	}
}

/* Build the three column class medium up */

@include medium-up() {

	.grid {

		// Set three to a row
		&.three {

			> li {
				padding-top: 0;
				width: 33.333333%;
				width: calc(100% / 3);
			} // close >li
		}
	} // .grid
} // close @media

/* Build the four column class medium up */

	// Set four to a row
.grid {

	&.four {
		> li {
			width: 100%;

			@include small-up() {
				width: 50%;
			}

			@include medium-small-up() {
				width: calc(100% / 3);
			}

			@include medium-up() {
				width: 25%;
			}



		} // close > li
	}
}

// This block styles the loop items for a grid layout
// The block might be better located in the generic bp-lists section

// Style the .bp-list li elements if a 'grid' class is set on the ul

// if grid is set & this is a member, group or blog loop
// we want to re-style some of the elements in the item
.buddypress-wrap {

	.grid.bp-list {
		padding-top: 20px;

		> li {
			border-bottom: none;

			.list-wrap {
				padding: $pad-med;
				padding-bottom: 3rem;
				margin: 0 10px;
			}

			.item-avatar {
				margin: 0;
				text-align: center;
				width: auto;

				img.avatar {
					display: inline-block;
					height: auto;
					width: 70px;
				}
			}

			.item-meta,
			.list-title {
				float: none;
				text-align: center;
			}

			.list-title {
				// font-size: inherit;
				line-height: 1.1;
			}

			.item-meta{
				margin: 0;
			}

			.item {

				@include responsive-font( 22 );
				left: 0;
				margin: 0 auto;
				text-align: center;
				width: 96%;

				.item-block,
				.group-desc {
					float: none;
					width: 96%;
				}

				.last-activity {
					margin-top: 5px;
				}

				.group-desc {
					clear: none;
				}

				.user-update {
					clear: both;
					text-align: left;
				}

				.activity-read-more a {
					display: inline;
				}
			}

			.action {
				bottom: 5px;
				float: none;
				position: absolute;
				bottom: 5px;
				height: auto;
				left: 0;
				margin: 0;
				padding: 5px;
				text-align: center;
				top: auto;
				width: 100%;

				.generic-button {
					float: none;
					margin: $marg-xsml 0 0;
					text-align: center;

					a,
					button {
						padding: 0.5em $pad-med;
					}
				}
			}

			.item-avatar,
			.avatar,
			.item {
				float: none;
			}

		} // close > li
	} // close .grid.bp-list


	// Specific grid layout adjustments by grid row qnt & component

	.blogs-list.grid.two {

		> li {

			.blogs-title {


			}
		}
	}

	// where three or four items to a row we need to increase the desc height as
	// narrow widths force the box taller & adjust some padding values.
	// In addition blogs grid in narrow theme widths need a little more height.

	.grid.three,
	.grid.four {

		> li {

			.group-desc {

			}
		}
	}

	.blogs-list.grid.three,
	.blogs-list.grid.four {

		> li {

			.last-activity {
				margin-bottom: 0;
			}

			.last-post {
				margin-top: 0;
			}
		}
	}

} // close .buddypress-wrap

// If we're logged out remove additional padding designed to help
// provide spaces for action button elements & reduce min-heights.

.buddypress:not(.logged-in) {

	.grid.bp-list {

		.list-wrap {
			padding-bottom: $marg-xsml;
		}
	}

	.grid.groups-list {

		.list-wrap {

		}
	}

	.grid.members-list{

		.list-wrap {

		}
	}

	.grid.blogs-list, {

		.list-wrap {

		}
	}
}

// ==== Vertical Navigation Classes ====

// These classes added to the BP user navigation elements
// will provide rules to modify the layout to present the
// parent object navigation in a vertical column & sub navs
// horizontally across the item-body

@include medium-up() {

	.bp-single-vert-nav { // described for the #buddypress element

		.bp-navs.vertical {
			overflow: visible;

			ul {
				border-right: 1px solid $med-light-grey;
				border-bottom: 0;
				float: left;
				margin-right: -1px;
				width: 25%;
			}

			li {
				float: none;
				margin-right: 0;

				&.selected a {
					background: $base-light-color;
					color: $brand-color;
					font-weight: bold;
				}

				&:focus,
				&:hover {
					background: $base-light-color;
				}

				a{
					line-height: 40px;
				}

				span {
					float: right;
					margin-right: 2px;
					margin-top: 12px;
					position: static;
				}
			} // li

		}

		.bp-navs.vertical.tabbed-links {

			li.selected {

				a {
					padding-left: 0;
				}
			}
		}

		// re-factor the related elements like the #item-body so it sits
		// to the side(floated)
		.bp-wrap {
			margin-bottom: $marg-med;

			.user-nav-tabs.users-nav,
			.group-nav-tabs.groups-nav {

				ul {

					li{
						position: relative;
					}

					li.current {
						left: 1px;
					}
				}
			}
		}

		.item-body:not(#group-create-body) {
			background: #fff;
			border-left: 1px solid $med-light-grey;
			float: right;
			margin: 0;
			min-height: 400px;
			padding: 0 0 0 $pad-med;
			width: calc(75% + 1px);

			#subnav:not(.tabbed-links) {
				margin: 0 0 0 -5px;
				width: auto;
				border-bottom: 1px solid $bp-border-color;
				@include box-shadow( 0 2px 12px 0 $off-white);

				li {

					@include font-size(14);
					margin: $marg-sml 0;

					a {
						padding: 0 $pad-sml;
					}

					a:focus,
					a:hover {
						background: none;
					}
				}

				li.current {

					a {
						background: none;
						color: $brand-color;
					}
				}

				li:last-child {

					a {
						border: none;
					}
				}

			} // close #subnav
		}
	}

	// Set the directory screens main navs as vertical aligned
	// medium breakpoint up only

	.bp-dir-vert-nav { // described for the #buddypress element

		.dir-navs {
			float: left;
			left: 1px;
			position: relative;
			width: 20%;

			ul {

				li {
					float: none;
					overflow: hidden;
					width: auto;

					.count{
						margin-top: 9px
					}

					&.selected {
						border: 1px solid $med-light-grey;

						a {
							color: $brand-color;
						}
					} // close .selected
				}

			}
		} // close .dir-navs

		.screen-content {
			border-left: 1px solid $med-light-grey;
			margin-left: 20%;
			overflow: hidden;
			padding: 0 0 $pad-lrg $pad-med;
			min-height: 250px;

			.subnav-filters {
				margin-top: 0;
			}
		}
	}

	// Style main navs as visual tabs effect
	// if user selects options in the Customizer
	// and classes are set.
	// N.B This is in addition to the  standalone visual tab style classes/mixin
	// provided so any elements may be styled to represent tabs.

	.buddypress-wrap {

		&.bp-vertical-navs {

			.dir-navs.activity-nav-tabs,
			.dir-navs.sites-nav-tabs,
			.dir-navs.groups-nav-tabs,
			.dir-navs.members-nav-tabs,
			.main-navs.user-nav-tabs,
			.main-navs.group-nav-tabs {

				@include primary-navs-vert-tabs();
			}
		}
	}

} // close @media


