// BP User Profiles screen
// @version 3.0.0
//
// 0/ General :)
// 1/ Profile Edit
// 2/ Profile Public Display
// 3/ Profile Photo

// General

.buddypress-wrap {

	.profile {
		margin-top: $marg-xlrg;
	}

	.public {

		.profile-fields {

			td.label {
				width: 30%;
			}
		}
	}

}

// Edit Screen

.buddypress-wrap {

	.profile.edit {

		// The groups tabs
		.button-nav {
			list-style: none;
			margin: $marg-xlrg 0 $marg-sml;

			li {
				display: inline-block;
				margin-right: $marg-sml;

				a {

					@include font-size(18);
				}
			}
		}

		.editfield {
			background: $off-white;
			border: 1px solid $bp-border-color;
			margin: $marg-med 0;
			padding: $pad-med;

			fieldset {
				border: 0;

				label {
					font-weight: 400;

					&.xprofile-field-label {
						display: inline;
					}
				}
			}
		}

		// Repeater sets
		.repeater_group_outer {
			margin: 0 0 15px;
			padding: 15px;
			cursor: move;
			background: $white;
			border: 1px solid $bp-border-color;

			.repeater_tools {
				display: flex;
				flex-flow: row wrap;

				a {
					align-items: center;
					display: flex;
				}
			}

			.repeater_set_title {
				flex: 1;
				min-width: 0;
			}

			.repeater_set_title_empty {
				color: #ccc;
			}

			.repeater_set_edit {
				margin-left: auto;
				margin-right: 5px;
			}
		}

		// The visual layout of the form controls and group description
		.editfield {
			display: flex;
			flex-direction: column;

			legend {
				margin-bottom: $marg-sml;
			}

			.description {
				margin-top: -$marg-sml;
				margin-bottom: $marg-sml;
				white-space: pre-line;
				order: 2;
			}

			> fieldset {
				order: 1;
			}

			.field-visibility-settings-toggle,
			.field-visibility-settings {
				order: 3;
			}
		}

	} // .profile
} // close .buddypress-wrap

.profile-edit {

	button.button > i {
		font-size: 18px;
		margin-right: 5px;
	}

}

#btn_add_repeater_set {
	align-items: center;
	display: flex;
	float: right;

	.dashicons {
		margin-right: 5px;
	}
}

body.no-js {

	.buddypress-wrap .field-visibility-settings-toggle,
	.buddypress-wrap .field-visibility-settings-close {
		display: none;
	}

	.buddypress-wrap .field-visibility-settings {
		display: block;
	}
}

.buddypress-wrap {

	.field-visibility-settings {
		margin: $marg-sml 0;
	}

	.current-visibility-level {
		font-style: normal;
		color: #333;
	}

	.field-visibility-settings,
	.field-visibility-settings-header {
		color: $light-text-plus;
	}

	.field-visibility-settings {

		fieldset {
			margin: $marg-xsml 0;
		}
	}

	.standard-form { // this needs to be a specific profile edit form class

		.editfield {

			fieldset {
				margin: 0;
			}
		}

		.field-visibility-settings {

			label {
				font-weight: 400;
				margin: 0;
			}

			.radio {
				list-style: none;
				margin-bottom: 0;
			}

			.field-visibility-settings-close {

				@include font-size(12);
			}
		}

		.wp-editor-container {
			border: 1px solid #dedede;

			textarea {
				background: $white;
				width: 100%;
			}
		}

		// field item description
		.description {
			font-size: inherit;
		}

		.field-visibility-settings legend,
		.field-visibility-settings-header {
			font-style: italic;
		}

		.field-visibility-settings-header {

			@include font-size(14);
			margin: 5px 0;
		}

		.field-visibility-settings {

			legend,
			label {

				@include font-size(14);
			}
		}

		.field-visibility select {
			margin: 0;
		}

	} // close .standard-form

	.html-active button.switch-html {
		background: #f5f5f5;
		border-bottom-color: transparent;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}

	.tmce-active button.switch-tmce {
		background: #f5f5f5;
		border-bottom-color: transparent;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}

} // close .buddypress-wrap

// Public Profile

.buddypress-wrap {

	.profile.public {

		.profile-group-title {
			border-bottom: 1px solid $bp-border-dark;
		}
	}
}

// This needs to be reviewed and re-located!?
body.register .buddypress-wrap .page ul {
	list-style: none;
}

// Avatars & Cover Photo

.buddypress-wrap {

	.profile {

		.bp-avatar-nav {
			margin-top: $marg-lrg;
		}
	}
}

#item-header a.link-change-cover-image,
#item-header a.position-change-cover-image,
#item-header a.link-change-profile-image {
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	width: 34px;
	height: 34px;
	left: 12px;
	top: 12px;
	z-index: 3;
	opacity: 0;
	transition: all 0.2s;
	text-decoration: none;

	> i {
		font-size: 34px;
	}
}

#item-header a.position-change-cover-image > i {
	font-size: 34px;
}

#item-header a.position-change-cover-image {
	top: 55px;
	display: none;
}

#buddypress #item-header {

	@media screen and (min-width: 1220px) {

		a.position-change-cover-image {
			display: flex;
		}

		.header-cover-img {
			display: block;
		}

		#header-cover-image.has-cover-image {
			background-image: none;
		}
	}
}

#item-header-avatar a.link-change-profile-image {
	top: 100px;
	left: 50%;
	margin-left: -15px;
}

#header-cover-image:hover a.link-change-cover-image,
#item-header-avatar:hover a.link-change-profile-image,
#header-cover-image:hover a.position-change-cover-image {
	opacity: 1;
}

.users-header #social-networks-popup,
.bp-widget.social #social-networks-popup {
	display: none;

	.bb-action-popup-content {
		padding: 26px 30px 35px;
		text-align: left;

		.social {
			margin-top: 7px;
		}

	}

}

.bp-widget.social #social-networks-popup {

	.bb-model-header > p {
		margin-left: auto;
		margin-bottom: 0;
		line-height: 1;
	}

	.bb-action-popup-content {

		.social {
			margin-top: 9px;
			width: 24px;
		}

	}
}

.bp-widget.social .social-networks-popup-hide {
	display: none;
}

.profile .bp-widget:has(.field_type_socialnetworks) #social-networks-popup {
	display: none;
}

.buddypress-wrap .bp-widget.social .bp-tables-user {
	overflow: visible;
}

.users-header #item-header-avatar {

	a.link-change-profile-image {
		top: 71px;
		left: 50%;
		margin-left: 0;
		transform: translateX(-50%);
	}

	&:hover .link-change-overlay {
		position: absolute;
		left: 3px;
		right: 3px;
		top: 3px;
		height: 164px;
		background-color: rgba(0, 0, 0, 0.3);
		border-radius: 50%;
	}

}

.social-networks-wrap {

	span.social {
		display: inline-block;
		width: 20px;
		margin-right: 10px;

		&:last-of-type {
			margin-right: 0;
		}

	}

	a i {
		font-size: 24px;
	}

	svg {
		width: 100%;
		vertical-align: middle;
	}
}

.item-body .bp-widget {
	margin-bottom: 20px;
}

@media screen and (max-width: 782px) {

	.member-header-actions.action {
		margin-top: 15px;
	}

	.single-headers li.generic-button {
		float: none;
	}
}

/* Profile Completion Widget  */

div.profile_completion_wrap {

	.progress_text_wrap {
		text-align: center;
	}
}

.pc_detailed_progress li {

	margin: 15px 0;

	span.completed_staus {
		color: #fff;
		float: right;
		width: 50px;
		text-align: center;

		html[dir="rtl"] & {
			display: flex;
			align-items: center;
			justify-content: end;
		}
	}
}

.pc_detailed_progress li.completed {

	span.completed_staus {
		color: $update-success;
	}
}

.pc_detailed_progress li.incomplete {

	span.completed_staus {
		color: $warn;
	}
}

.pc_progress_graph {

	path {
		stroke: #e7e7e8;
		stroke-linecap: round;
		stroke-width: 6;
	}

	&.pc_progress_graph--blank {

		path {
			stroke-linecap: initial;
		}
	}
}

.pc_progress_wrap {
	text-align: center;
	margin: 0 0 25px;

	svg {
		width: 70%;
		height: auto;
		margin: 0 auto;
	}

	.pc_progress_rate {
		stroke: $informational;
	}
}

.progress_text_wrap {
	margin-top: -50px;

	h3 {
		margin: 0;
	}

	.progress_text_value {
		font-weight: 600;
	}
}

.progress_text_label {
	display: block;
}

/* Send Invites Table */

#member-invites-table {

	.field-actions,
	.field-actions-last {
		text-align: center;

		.field-actions-remove {
			cursor: pointer;
		}
	}

	.field-actions-add {
		cursor: pointer;

		i {
			background-color: #000;
			color: #fff;
			border-radius: 100%;
			padding: 3px 4px 1px 3px;
			height: auto;
			width: auto;
			line-height: normal;
		}

		&.disabled {
			cursor: not-allowed;

			i {
				background-color: #ccc;
			}
		}
	}
}

/* Hide sidebar and header for web view in App */

.in-bbapp {

	#secondary {
		display: none;
	}

	#buddypress {

		#item-header,
		.bp-wrap .main-navs {
			display: none;
		}

	}

}

.bb-popup-card {
	position: fixed;
	background-color: #fff;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 5px;
	padding: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	min-width: 200px;
	z-index: 9999991;
	opacity: 0;
	transition-behavior: allow-discrete;/* stylelint-disable-line */
	transition: opacity 0.3s ease;
	transform: translate(9999px);

	&.show {
		opacity: 1;
		transform: translate(0);
	}

	.acomments-modal-open & {
		z-index: 999985;
	}

	.skeleton-card {
		display: none;
	}

	&.loading {

		.bb-card-content {
			display: none;
		}
	}
}

.bb-popup-card.loading {

	.skeleton-card {
		display: block;
	}

	.skeleton-card-entity {
		flex: 1;

		> div {
			border-radius: 6px;
		}
	}

	.skeleton-card-body {
		display: flex;
		align-items: flex-start;
		gap: 24px;
	}

	.skeleton-card-avatar {
		width: 88px;
		height: 88px;
		border-radius: 50%;
	}

	&.bb-group-card {

		.skeleton-card-avatar {
			border-radius: 8px;
		}
	}

	.skeleton-card-type {
		max-width: 61px;
		height: 21px;
		margin-bottom: 6px;
	}

	.skeleton-card-heading {
		max-width: 100px;
		height: 21px;
		margin-bottom: 10px;
	}

	.skeleton-card-meta {
		max-width: 150px;
		height: 15px;
	}

	&.bb-group-card {

		.skeleton-card-footer:not(.bb-card-footer--plain) {

			.skeleton-card-button:first-of-type {
				width: 66.66%;
			}
		}
	}

	.skeleton-card-footer {
		display: flex;
		align-items: flex-start;
		gap: 10px;
		margin: 30px 0 0;

		.skeleton-card-button {
			display: inline-block;
			width: 33.33%;
			height: 30px;
			border-radius: 6px;
		}

		&.bb-card-footer--plain,
		&.skeleton-footer-plain {

			.skeleton-card-button {
				display: none;
				width: 100%;

				&:first-of-type {
					display: inline-block;
				}
			}
		}
	}
}

.bb-card-body {
	display: flex;
	align-items: flex-start;
	gap: 24px;
}

.bb-card-avatar {
	position: relative;

	img {
		width: 88px;
		height: auto;
		min-width: 88px;
	}

	.card-profile-status {
		position: absolute;
		display: none;
		width: 13px;
		height: 13px;
		background-color: #14b550;
		border: 2px solid #fff;
		border-radius: 50%;
		right: 7px;
		top: 5px;

		&.active {
			display: inline-block;
		}
	}
}

.bb-card-heading {
	margin: 0 0 10px;
}

.bb-card-profile-type {
	display: none;
	background-color: #fafafa;
	padding: 4px 8px;
	font-size: 11px;

	&.hasMemberType {
		display: inline;
	}
}

.bb-card-meta {

	span {
		font-size: 14px;
		line-height: 21px;
	}

	> span {
		margin: 0 5px 0 0;
		white-space: nowrap;
	}

	.card-meta-type--empty {
		display: none;
	}

	.card-meta-status {
		text-transform: capitalize;
	}
}

.bb-card-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 30px 0 0;

	.bb-group-card & {

		.bb-card-action:first-of-type {
			flex: 1 1 60%;
		}
	}

	.card-button,
	button.follow-button {
		display: inline-block;
		text-align: center;
		white-space: nowrap;
		font-size: 14px;
		font-weight: 500;
		padding: 0 15px;
		height: 30px;
		line-height: 28px;
		width: 100%;
	}

	.buddypress .buddypress-wrap & {

		button {
			width: 100%;
			white-space: nowrap;
		}

		button.small,
		a.card-button,
		a.friendship-button,
		a.follow-button,
		button.friendship-button {
			min-height: 30px;
			line-height: 28px;

			@media screen and (max-width: 560px) {
				width: 100%;
				display: inline-block;
				padding: 0;
			}
		}
	}

	.bb-card-action {
		flex: 1;
		white-space: nowrap;
	}

	&.bb-card-footer--plain {

		.bb-card-action-primary,
		.bb-card-action-secondary {
			display: none;
		}
	}

	@media screen and (max-width: 560px) {
		flex-direction: column;

		.bb-card-action {
			width: 100%;
		}
	}
}

.bb-group-card {

	.card-group-members {

		.bs-group-members {
			margin: 5px 0 0 -4px;
		}
	}
}