.bb-rl-profile-edit-wrapper {
	padding: var(--bb-rl-space-300) var(--bb-rl-space-400);

	input[type="text"],
	input[type="email"],
	input[type="password"],
	input[type="url"],
	input[type="tel"],
	input[type="number"],
	select,
	textarea {
		width: 100%;
	}

	fieldset legend {

		@include bb-rl-label-heading-md;
		margin-bottom: var(--bb-rl-space-100);
		color: var(--bb-rl-text-secondary-color);

		+ .description {

			@include bb-rl-label-heading;
			color: var(--bb-rl-text-tertiary-color);
			margin-top: calc(var(--bb-rl-space-50) * -1);
			margin-bottom: var(--bb-rl-space-50);
		}
	}

	.editfield {
		margin-bottom: var(--bb-rl-space-100);
	}

	#profile-group-edit-submit {

		@include bb-rl-button;
		@include bb-rl-button--brand-fill;
		padding: var(--bb-rl-space-50) var(--bb-rl-space-200);
		font-size: 0.875rem;
		border: 1px solid transparent;
		/* stylelint-disable function-url-quotes */
		background-image: url('data:image/svg+xml,<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M28.7076 9.70757L12.7076 25.7076C12.6147 25.8005 12.5044 25.8743 12.383 25.9246C12.2616 25.975 12.1315 26.0009 12.0001 26.0009C11.8687 26.0009 11.7385 25.975 11.6171 25.9246C11.4957 25.8743 11.3854 25.8005 11.2926 25.7076L4.29257 18.7076C4.10493 18.5199 3.99951 18.2654 3.99951 18.0001C3.99951 17.7347 4.10493 17.4802 4.29257 17.2926C4.48021 17.1049 4.7347 16.9995 5.00007 16.9995C5.26543 16.9995 5.51993 17.1049 5.70757 17.2926L12.0001 23.5863L27.2926 8.29257C27.4802 8.10493 27.7347 7.99951 28.0001 7.99951C28.2654 7.99951 28.5199 8.10493 28.7076 8.29257C28.8952 8.48021 29.0006 8.7347 29.0006 9.00007C29.0006 9.26543 28.8952 9.51993 28.7076 9.70757Z" fill="white" fill-opacity="0.6"/></svg>');
		/* stylelint-enable */
		background-repeat: no-repeat;
		background-position: 12px 50%;
		background-size: 16px;
		padding-left: 36px;
	}

	#btn_add_repeater_set {

		@include bb-rl-button;
		@include bb-rl-button-secondary-fill;
		float: left;
		margin-right: var(--bb-rl-space-100);
		padding: var(--bb-rl-space-50) var(--bb-rl-space-200);
		font-size: 0.875rem;

		.bb-icon-plus {
			margin-right: var(--bb-rl-space-100);
			line-height: 1;

			&::before {
				content: "\e3d4";
				font-family: bb-icons-rl;
				font-size: 14px;
				font-style: normal;
			}
		}
	}

	.repeater_group_outer {
		background-color: var(--bb-rl-background-secondary-color);
		border-radius: var(--bb-rl-radius-md);
		padding: var(--bb-rl-space-200) var(--bb-rl-space-200);
		margin-bottom: var(--bb-rl-space-100);
	}

	.repeater_tools {
		display: flex;
		align-items: center;

		.repeater_set_title {

			@include bb-rl-base-heading;
			margin-right: auto;
		}

		.dashicons {

			&::before {
				content: "";
				font-family: bb-icons-rl;
				font-size: 20px;
				color: var(--bb-rl-icon-secondary-color);
			}

			&.dashicons-edit {

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

			&.dashicons-trash {

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

		> a {
			padding: 0 var(--bb-rl-space-50);
			cursor: pointer;
		}
	}

	.repeater_group_inner {
		margin: var(--bb-rl-space-200) 0 0;

		fieldset {
			margin: 0 0 var(--bb-rl-space-200);
		}
	}

	.repeater_sets_sortable {
		margin-bottom: var(--bb-rl-space-200);
	}
}

.bb-rl-profile-edit-header {
	padding: var(--bb-rl-space-200) var(--bb-rl-space-300);
	border-bottom: 1px solid var(--bb-rl-border-secondary-color);

	h2 {

		@include bb-rl-base-heading-xl;
	}
}

.bb-rl-main-nav-profile-edit {
	padding: 0 0 var(--bb-rl-space-200);
	border-bottom: 1px solid var(--bb-rl-border-secondary-color);
	margin-bottom: var(--bb-rl-space-400);
}

.bb-rl-container {

	.buddypress-wrap:has(.edit.bb-rl-profile-panel) {

		#item-header {
			padding-left: var(--bb-rl-space-600);
			padding-right: var(--bb-rl-space-600);

			@media screen and (max-width: 992px) {
				padding-left: var(--bb-rl-space-200);
				padding-right: var(--bb-rl-space-200);
			}
		}

		#item-header:has(.bp-feedback) {
			padding-top: var(--bb-rl-space-300);

			.bp-feedback {
				max-width: 720px;
				margin: 0 auto;
			}
		}
	}
}

.bb-rl-account-settings-section {
	background: var(--bb-rl-background-color);
	border-radius: var(--bb-rl-radius-lg);
	padding: var(--bb-rl-space-300) var(--bb-rl-space-400);
	margin: 0 auto;
	max-width: 720px;

	.screen-heading {
		font-size: var(--bb-rl-font-size-base);
		font-weight: 500;
		line-height: var(--bb-rl-base-line);
		margin: 0 0 var(--bb-rl-space-200);
	}

	p {
		margin-bottom: var(--bb-rl-space-200);
		font-size: 14px;
		font-weight: 400;
		line-height: 22px;
	}

	.bb-field-wrap {
		margin-bottom: var(--bb-rl-space-300);
	}

	label {
		font-size: 14px;
		font-weight: 500;
		line-height: 22px;
		display: block;
		margin: 0 0 var(--bb-rl-space-100);
		color: var(--bb-rl-text-secondary-color);
	}

	form {

		input[type="text"],
		input[type="email"],
		input[type="password"],
		input[type="url"],
		input[type="tel"],
		input[type="number"],
		textarea {
			width: 100%;
		}
	}

	.bp-feedback {
		margin-bottom: var(--bb-rl-space-200);

		p {
			margin: 0;
		}
	}

	#delete-account-button,
	input#submit {

		@include bb-rl-button;
		@include bb-rl-button--brand-fill;
		padding: 6px var(--bb-rl-space-200);
		font-size: 0.875rem;

		/* stylelint-disable function-url-quotes */
		background-image: url('data:image/svg+xml,<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M28.7076 9.70757L12.7076 25.7076C12.6147 25.8005 12.5044 25.8743 12.383 25.9246C12.2616 25.975 12.1315 26.0009 12.0001 26.0009C11.8687 26.0009 11.7385 25.975 11.6171 25.9246C11.4957 25.8743 11.3854 25.8005 11.2926 25.7076L4.29257 18.7076C4.10493 18.5199 3.99951 18.2654 3.99951 18.0001C3.99951 17.7347 4.10493 17.4802 4.29257 17.2926C4.48021 17.1049 4.7347 16.9995 5.00007 16.9995C5.26543 16.9995 5.51993 17.1049 5.70757 17.2926L12.0001 23.5863L27.2926 8.29257C27.4802 8.10493 27.7347 7.99951 28.0001 7.99951C28.2654 7.99951 28.5199 8.10493 28.7076 8.29257C28.8952 8.48021 29.0006 8.7347 29.0006 9.00007C29.0006 9.26543 28.8952 9.51993 28.7076 9.70757Z" fill="white" fill-opacity="0.6"/></svg>');
		/* stylelint-enable */
		background-repeat: no-repeat;
		background-position: 12px 50%;
		background-size: 16px;
		padding-left: 36px;
	}

	#delete-account-button {
		margin-top: var(--bb-rl-space-200);
	}


	.subnav_tab {
		margin-bottom: var(--bb-rl-space-200);

		ul {
			margin: 0;
			padding: 0;
			list-style: none;
			display: flex;
			flex-wrap: wrap;
			gap: var(--bb-rl-space-100);

			li {
				margin: 0;
				padding: 0;
				font-size: var(--bb-rl-font-size-sm);
				letter-spacing: var(--bb-rl-letter-spacing-sm);

				a {
					display: block;
					padding: var(--bb-rl-space-50) var(--bb-rl-space-200);
					border-radius: var(--bb-rl-radius-full);
					color: var(--bb-rl-text-secondary-color);

					&:hover {
						color: var(--bb-rl-text-color);
						background-color: var(--bb-rl-background-secondary-color);
					}

				}

				&.selected {

					a {
						color: var(--bb-rl-text-color);
						background-color: var(--bb-rl-background-secondary-color);
					}
				}
			}
		}
	}

	.notification_info {
		display: flex;
		align-items: center;
		gap: var(--bb-rl-space-500);
		border: 1px solid var(--bb-rl-border-secondary-color);
		border-radius: var(--bb-rl-radius-md);
		padding: var(--bb-rl-space-200);
		margin-bottom: var(--bb-rl-space-300);

		.notification_type {
			display: flex;
			align-items: center;
			flex: 1;

			h3 {
				font-size: var(--bb-rl-font-size-base);
				font-weight: 500;
				line-height: var(--bb-rl-base-line);
				margin: 0;

				i {
					margin-right: var(--bb-rl-space-100);
					font-size: var(--bb-rl-font-size-base);
				}
			}

			p {
				margin: 0;
				font-size: var(--bb-rl-font-size-xs);
				line-height: var(--bb-rl-base-line-xs);
				color: var(--bb-rl-text-secondary-color);
			}
		}

		.notification_learn_more {
			display: none;
		}
	}
}

table.profile-settings {
	table-layout: fixed;
	width: 100%;
	border: 1px solid var(--bb-rl-border-secondary-color);
	border-spacing: 0;
	border-radius: var(--bb-rl-radius-base);
	margin-bottom: var(--bb-rl-space-300);

	th.title {
		text-align: left;
		padding: calc(var(--bb-rl-space-100) + var(--bb-rl-space-50)) var(--bb-rl-space-200);
		font-size: 15px;
		font-weight: 600;
	}

	tbody {

		tr:nth-child(odd) {
			background-color: var(--bb-rl-background-secondary-color);

			td select {
				background-color: var(--bb-rl-background-color);
			}
		}

		td {
			font-size: var(--bb-rl-font-size-sm);
			padding: calc(var(--bb-rl-space-100) + var(--bb-rl-space-50)) var(--bb-rl-space-200);

			select {
				width: 100%;
			}
		}
	}
}
