// BP Widgets
// @version 4.0.0

.buddypress.widget {

	.item-options {

		@include font-size(12);

		margin: 0 0 1em;
		padding: 1em 0;
	}

	.bp-login-widget-user-avatar {
		float: left;
	}

	.bp-login-widget-user-links {
		margin-left: 70px;
	}

	ul.item-list {
		list-style: none;
		margin: $marg-sml 0;
	}

	ul.activity-list {

		padding: 0;

		blockquote {
			margin: 0 0 1.5em;
			overflow: visible;
			padding: 0 0 0.75em 0.75em;
		}

		img {
			margin-bottom: 0.5em;
		}

		li {
			border-bottom: 1px solid $primary-grey;
			margin-bottom: 1em;

			.activity-header p {
				margin-bottom: 0.5em;
			}

			&:last-child {
				border-bottom: 0;
			}
		}
	}

	div.activity-list {

		blockquote {
			padding: 0;
			border: none;

			.activity-item {

				&:not(.mini) {
					position: relative;
					box-shadow: 1px 0 4px rgba(0, 0, 0, 0.15);
					padding: 0 1em;

					&:after,
					&:before {
						position: absolute;
						left: 15px;
						display: block;
						width: 0;
						height: 0;
						border-style: solid;
						border-color: transparent;
						content: "";
					}

					&:before {
						bottom: -18px;
						border-top-color: rgba(0, 0, 0, 0.15);
						border-width: 9px;
						left: 14px;
					}

					&:after {
						bottom: -16px;
						border-top-color: #fff;
						border-width: 8px;
					}
				}

				&.mini {

					.avatar {
						display: inline-block;
						width: 20px;
						height: 20px;
						vertical-align: middle;
						margin-right: 2px;
					}
				}
			}
		}

		footer {
			display: flex;
			align-items: center;

			img.avatar {
				display: inline-block;
				border: none;
				margin-right: 0.5em;
			}

			.activity-time-since {
				font-size: 90%;
			}
		}
	}

	.avatar-block {

		@include flex-box-dir($flex-dir: row, $flex-wrap: wrap);

		img {
			margin: 0.5em;
		}
	}

	ul#friends-list,
	ul#groups-list,
	ul#members-list {

		@include clearfix-element("li");

		li {

			margin-bottom: 1em;

			.item-avatar {
				float: left;
				width: 60px;
			}

			.item {
				margin-left: 70px;
			}
		}
	}
}

// BP Widgets in Main content area.
// User's and Group's widgetized default home pages.

.buddypress-wrap {

	.buddypress.widget {

		ul#friends-list,
		ul#groups-list,
		ul#members-list {

			@include flex-box-dir($flex-dir: column);

			@include medium-small-up() {

				@include flex-box-dir($flex-dir: row, $flex-wrap: wrap);
			}


			li {
				border: 1px solid $bp-border-color;

				@include flex-align();
				@include box-item-size($grow: 1, $basis: 46%);

				@include large-up() {

					@include box-item-size($grow: 0, $basis: 20%);
				}

				margin: 2%;

				.item-avatar {
					padding: $pad-sml;
					text-align: center;
				}

				.item {
					padding: $pad-sml;


					.item-meta {

						@include font-size(12);
						overflow-wrap: break-word;
					}
				}
			} // close li

			@include large-up() {

				margin: $marg-sml -2%;
				width: 100%;

				li {

					@include box-item-size($grow: 0, $basis: auto);
					margin: $marg-sml 2% 1%;
					width: 46%;
				}
			}
		}

		blockquote {
			margin: 0 0 1.5em;
			overflow: visible;
			padding: 0 0 0.75em 0.75em;
		}
	}
}