// Sitewide template error & info messages constructs.
// @version 3.0.0.
.warn {
	color: $warn;
}

.bp-messages {
	border: 1px solid $bp-border-dark;
	margin: 0 0 $marg-med;

	.sitewide-notices {
		display: block;
		margin: $marg-xsml;
		padding: $pad-sml;
	}

	// General info boxes
	&.info {
		margin-bottom: 0;
	}

	// Update success message boxes
	&.updated {
		clear: both;
		display: block;
	}

} // close .bp-messages

// user message screens handled separately due to backbone templates
// & looped messages
.bp-messages.bp-user-messages-feedback {
	border: 0;
}

// This is an anomaly, this screen message is locked away in
// core avatar styles and ought to be pulled out, markup & styles to nouveau
#group-create-body {

	.bp-cover-image-status {

		p.warning {
			background: $informational;
			border: 0;

			@include box-shadow( 0 0 3px 0 rgba(0, 0, 0, 0.2) );
			color: $white;
		}
	}
}


// message-box() may be have params passed through:
// ($background: #fff, $text-color: #000, $border: 1px solid #faf0f0)
// '$border: none' ensures border turned off in favour of
// box shadow, default is 1px solid.
// text-color default value is background color 50% darker.
// Border color default is background 10% darker.

.bp-feedback:not(.custom-homepage-info) {

	@include flex-box-dir();
	@include flex-align();
}

.bp-feedback {

	@include message-box($border: none);
	@include box-shadow( 0 1px 1px 1px rgba(0, 0, 0, 0.1) );
	color: $light-text-plus;

	margin: 10px 0;
	position: relative;

	p {
		margin: 0;
		padding: 10px 5px;
	}

	span.bp-icon {
		color: $white;
		display: block;
		font-family: dashicons;
		left: 0;
		margin-right: $marg-sml;
		position: relative;
		padding: 0  0.5em;
	}

	.bp-icon {
		font-size: 20px;
		padding: 0 2px;
	}

	.bp-help-text {
		font-style: italic;
	}

	.text {

		@include font-size(14);
		margin: 0;
		padding: $pad-sml 0;
	}
}

.bp-feedback.no-icon {
	padding: $pad-sml;
}

.bp-feedback.small:before {
	line-height: inherit;
}

a[data-bp-close] span,
button[data-bp-close] span {
	font-size: 24px;
}

.buddypress .buddypress-wrap  a[data-bp-close],
.buddypress .buddypress-wrap  button[data-bp-close] {
	border: 0;
	padding: 0;
	height: auto;
	margin-bottom: auto;
	margin-top: 10px;
	margin-right: 12px;

	&:hover,
	&:focus {
		background: transparent;
	}
}

.bp-feedback.no-icon {

	a[data-bp-close],
	button[data-bp-close] {
		top: -6px;
		right: 6px;
	}
}

button[data-bp-close]:hover {
	background-color: transparent;
}

.bp-feedback.info,
.bp-feedback.help,
.bp-feedback.error,
.bp-feedback.warning,
.bp-feedback.loading,
.bp-feedback.success,
.bp-feedback.success-notice,
.bp-feedback.updated {

	.bp-icon {

		@include center-vert();
	}
}

.bp-feedback.info,
.bp-feedback.help {

	.bp-icon {
		background-color: $informational;

		&:before {
			content: "\f348";
		}
	}
}

.bp-feedback.error,
.bp-feedback.warning {

	.bp-icon {
		background-color: $warnings;

		&:before {
			content: "\f534";
		}
	}
}

.bp-feedback.loading {

	.bp-icon {
		background-color: $loading;

		&:before {
			content: "\f469";
		}
	}
}

.bp-feedback.success-notice,
.bp-feedback.success,
.bp-feedback.updated {

	.bp-icon {
		background-color: $update-success;

		&:before {
			content: "\f147";
		}
	}
}

.bp-feedback.help {

	.bp-icon {

		&:before {
			content: "\f468";
		}
	}
}

.bp-feedback {

	&.bp-feedback--clean {
		border-radius: 5px;
		box-shadow: none;
		border: 1px solid rgba(0, 0, 0, 0.1);
		padding: 9px 12px;
		font-size: 14px;
		line-height: 18px;
		font-weight: 600;

		.bp-icon {
			background-color: transparent;
			color: #2271b1;
			padding: 0;
			margin: 0 8px 0 0;
			display: inline-flex;
			height: 16px;

			&::before {
				font-family: bb-icons;
				font-style: normal;
				display: inline-flex;
				text-decoration: inherit;
				text-align: center;
				font-variant: normal;
				text-transform: none;
				font-size: 16px;
				line-height: 16px;
			}
		}

		> p {
			padding: 0;
			margin: 0;

			.bp-admin-card .form-table td & {
				margin-top: 0;
			}
		}

		> p + p {
			margin-top: 10px;
		}

		&.info {
			border-color: #2271b1;
			background-color: #f0f6fc;
			color: #3c434a;

			.bp-icon {
				color: #2271b1;

				&::before {
					content: "\eebc";
					font-weight: 200;
				}
			}

			> p {
				color: #3c434a;

				.bp-admin-card .form-table td & {
					margin-top: 0;
					color: #3c434a;
				}
			}
		}

		&.bp-feedback--vmiddle {
			align-items: center;
		}
	}
}

#pass-strength-result {
	background-color: $pwd-background;
	border-color: #ddd;
	border-style: solid;
	border-width: 1px;
	display: none;
	font-weight: 700;
	margin: $marg-sml 0 $marg-sml 0;
	padding: $pad-sml;
	text-align: center;
	width: auto;

	// Show the feedback message when fields populated
	&.show {
		display: block;
	}

	&.mismatch {

		@include pwd-bad-colors($color: $white, $background: $black, $border: transparent);
	}

	&.error,
	&.bad {

		@include pwd-bad-colors($color: $white);
	}

	&.short {

		@include pwd-short-colors($color: $white);
	}

	&.strong {

		@include pwd-good-colors($color: $white);
	}

} // close #pass-strength-result

.standard-form#signup_form div div.error {
	background: #faa;
	color: #a00;
	margin: 0 0 $marg-sml 0;
	padding: $pad-sml;
	width: 90%;
}

// these two are really helpful???!!
.accept,
.reject {
	float: left;
	margin-left: $marg-sml;
}

// .bp-feedback messages  - Ajax specific (.bp-ajax-message)

// Members action button errors in grid layouts

.members-list.grid { // this probably ought to serve the group loop too

	.bp-ajax-message {
		background: rgba($white, 0.9);
		border: 1px solid $bp-border-color;

		@include font-size(14);
		left: 2%;

		// postion absolute to prevent the element from expanding
		// content height & breaking grid box heights.
		position: absolute;
		padding: $pad-sml $pad-med;
		right: 2%;
		top: 30px;
	}
}