// BP Whats new form handles user updates to groups or profiles
// @version 3.0.0

.item-body {

	.activity-update-form {

		.activity-form {
			margin: 0;
			padding: 0;
		}
	}
}

.activity-update-form #whats-new-post-in-box {
	margin: 16px 0;
}

.bp-nouveau-activity-form-placeholder- {
	display: none;
}

.activity-post-name-status {
	max-width: 60%;

	@media screen and (max-width: 500px) {
		max-width: 80%;
	}
}

#bp-activity-privacy-point {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	margin-top: 5px;
	max-width: 100%;

	.privacy-point-icon:before {
		font-family: 'bb-icons';/* stylelint-disable-line */
		speak: none;
		display: inline-block;
		text-decoration: inherit;
		text-transform: none;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		margin-right: 4px;
	}

	.group-privacy-point-icon img {

		#user-status-huddle & {
			max-height: 24px;
			margin: -2px 5px -2px -5px;
			border-radius: 3px;
		}

	}

	&.public {

		.privacy-point-icon:before {
			content: "\eeaa";
		}
	}

	&.loggedin {

		.privacy-point-icon:before {
			content: "\e95d";
		}
	}

	&.friends {

		.privacy-point-icon:before {
			content: "\ef5b";
		}
	}

	&.onlyme {

		.privacy-point-icon:before {
			content: "\eecc";
		}
	}

	&.group {

		.privacy-point-icon:before {
			content: "\e95d";
		}
	}

	&.bp-activity-edit-group {
		opacity: 0.5;
		cursor: default;

		.bb-icon-chevron-down {
			display: none;
		}

	}

	.bp-activity-edit--privacy-idle & {
		cursor: default;

		span,
		i {
			opacity: 0.5;
		}
	}

	&.bp-activity-focus-group-active {
		opacity: 0.5;
		cursor: default;

		i.bb-icon-chevron-down {
			display: none;
		}
	}

	.bp-activity-privacy-status {
		font-weight: 500;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		flex: 1;
	}

	.bb-icon-chevron-down {
		margin-left: 2px;
	}
}

#whats-new-form:not(.bp-activity-edit--privacy-idle) {

	#bp-activity-privacy-point {

		&[data-bp-tooltip][data-bp-tooltip-pos="up"]:before,
		&[data-bp-tooltip][data-bp-tooltip-pos="up"]:after {
			display: none;
		}
	}
}

.activity-post-user-name-container {

	h5 {
		margin: 0;
	}

	.activity-post-user-name {
		line-height: 1;
	}
}

#whats-new-form {
	border: 1px solid #d2d4d6;

	.bb-model-header {
		box-shadow: none;
		border-bottom: 1px solid #d2d4d6;
	}
}

.bp-nouveau-activity-form-placeholder-,
#whats-new-form {
	background-color: #fff;

	#whats-new-privacy-stage,
	#bp-activity-privacy-point,
	#activity-schedule-section {
		display: none;
	}
}

.activity-modal-open {
	overflow: hidden;
}

#whats-new-form.focus-in {

	#bp-activity-privacy-point {
		display: inline-flex;
		color: #92949d;

		.bb-icon-chevron-down {
			font-size: 12px;
			margin-left: 5px;
		}
	}
}

#whats-new-form.focus-in--privacy {

	#whats-new-privacy-stage {
		display: block;
	}

	#activity-header {
		margin-bottom: 0 !important;
	}

	.whats-new-form-header,
	#editor-toolbar,
	#whats-new-attachments,
	.whats-new-form-footer,
	#message-feedabck {
		display: none;
	}
}

#whats-new-form.focus-in--privacy:not(.focus-in--group) {

	.privacy-status-form-footer {
		visibility: hidden;
		height: 0;
		width: 0;
		opacity: 0;
		border: 0;
	}
}

#whats-new-form.focus-in--attm,
#whats-new-form.focus-in--scroll {

	#editor-toolbar {
		border-top: 1px solid #eee;
	}
}

#whats-new-form.focus-in--blank-group {

	#privacy-status-submit {
		opacity: 0.6;
		cursor: default;
		pointer-events: none;
	}
}

#whats-new-form.media-uploading,
#whats-new-form.focus-in--empty {

	#aw-whats-new-submit {
		opacity: 0.6;
		cursor: default;
		pointer-events: none;
	}
}

#whats-new-form.activity-form {

	#discard-draft-activity {
		display: none;
	}
}

#whats-new-form.activity-form.has-draft {

	#discard-draft-activity {
		display: block;
		padding: 0 8px 0 0;
	}
}

#discard-draft-activity {
	background-color: transparent !important;
	border: 0 !important;
	font-size: 15px !important;
	line-height: 1 !important;
	text-decoration: none !important;
	color: inherit !important;
}

#whats-new-form:not(.focus-in--group) #privacy-status-group-back {
	display: none !important;
}

#whats-new-form.focus-in--privacy.focus-in--group #privacy-status-back {
	display: none;
}

#whats-new-form:not(.focus-in--group) #whats-new-post-in-box-items {
	display: none;
}

.privacy-status-form-body {
	padding: 5px 0 15px;
}

.bp-activity-privacy__label {
	margin: 0;
	padding: 10px 30px;
	display: flex;
	align-items: center;
	cursor: pointer;
	text-align: left;

	&:hover {
		background-color: #fbfaf9;
	}

	.privacy-tag-wrapper {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.privacy-radio {
		margin-left: auto;
	}

	.privacy-figure {
		display: inline-block;
		width: 40px;
		height: 40px;
		line-height: 40px;
		border-radius: 50%;
		background-color: #efefef;
		text-align: center;
		margin: 0 15px 0 0;

		&:before {
			font-family: 'bb-icons';/* stylelint-disable-line */
			speak: none;
			display: inline-block;
			text-decoration: inherit;
			text-transform: none;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
			font-size: 20px;
		}

		&--public:before {
			content: "\eeaa";
		}

		&--loggedin:before {
			content: "\e95d";
		}

		&--friends:before {
			content: "\ef5b";
		}

		&--onlyme:before {
			content: "\eecc";
		}

		&--group:before {
			content: "\ef5a";
		}
	}

	.privacy-label {
		display: inline-block;
		font-weight: 500;
		margin: 0 0 5px;

		i {
			margin: 0 0 0 5px;
		}
	}

	.privacy-sub-label {
		display: block;
		font-size: 80%;
		color: #7f868f;
	}
}

.privacy-status-actions {
	margin-left: auto;
	padding: 10px 15px;
}

.privacy-status-form-footer {
	display: flex;
	justify-content: space-between;
	background-color: #fbfbfc;
	border-top: 1px solid #eee;
	border-radius: 0 0 4px 4px;
}

#buddypress input#privacy-status-back,
#buddypress input#privacy-status-group-back {
	background: transparent;
	border: 0;
	font-size: 14px;
	font-weight: 500;
	color: #a3a5a9;
	margin: 0 10px;
	padding: 0 10px;
	width: auto;
	box-shadow: none;
}

.bp-nouveau-activity-form-placeholder-,
.activity-update-form {
	border: 1px solid $bp-border-dark;

	margin: $marg-med 0;

	#whats-new-form-placeholder,
	#whats-new-form.activity-form {
		position: relative;
		display: inline-block;
		width: 100%;

		&.hide-schedule-button #bb-schedule-posts {
			display: none;
		}
	}

	#whats-new-form.bottom-notice {
		margin-bottom: 60px;

		#message-feedabck.updated {
			position: absolute;
			bottom: -60px;
		}
	}

	.whats-new-form-header {
		display: flex;
	}

	.bb-model-header {
		display: none;
		background-color: #fff;

		.bb-icon-close {
			color: #939597;
		}

	}

	.whats-new-title {
		display: none;
		color: $black;
		font-size: 18px;
		line-height: 1.3;
		font-weight: 600;
		padding: 0 0 12px 0;
		margin: 0 25px 12px;
		border: 0;
		border-bottom: 1px solid $bp-border-color;
		border-radius: 0;
		outline: none;
		width: calc(100% - 50px);
	}

	input[type="text"].whats-new-title:focus {
		box-shadow: none;
		border-color: $bp-border-color;
	}

	#whats-new-submit #aw-whats-new-reset {
		display: none;
	}

	.activity-form.focus-in {

		&#whats-new-form #whats-new-toolbar {
			border: 0;
			padding: 0 15px 0 25px;
		}

		.bb-model-header {
			padding: 15px 25px;
		}

		.whats-new-title {
			display: block;
		}

		#whats-new {
			display: block;
			margin: 0 25px 10px;
			padding: 0;
			min-height: 95px;
		}

		#activity-form-submit-wrapper {
			padding: 0 25px 0 15px;
		}

		#whats-new-content {
			width: 100%;
		}

		.bb-model-header {
			display: flex;
			margin: 0;
		}

		.whats-new-form-header {
			flex-flow: column;

			#user-status-huddle {
				width: auto;
				display: flex;

				.user-name {
					display: block;
				}

				#bp-activity-privacy {
					display: block;
				}

			}
		}

		#editor-toolbar {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-pack: end;
			-ms-flex-pack: end;
			justify-content: flex-end;
			position: relative;
			padding: 20px 25px 16px;
			margin: 0;
			border-top: 0;

			.emojionearea-button:before {
				content: "\ee5f";
				font: normal 400 normal 24px/1 bb-icons;/* stylelint-disable-line */
				opacity: 1;
				background: none;
				position: static;
			}

			.post-elements-buttons-item {
				margin-right: 10px;

				[class*=" bb-icon-"] {
					font-size: 24px;
				}

			}

		}

		#whats-new-attachments .dropzone.open {
			margin: 0 0 10px 0;
		}

		&.has-feedback {

			#message-feedabck.bp-messages {
				position: absolute;
				top: 58px;
				margin: 15px 25px 0;
				width: calc(100% - 50px);
				min-width: initial;
				border-radius: 4px;

				p:empty,
				div:empty {
					display: none;
				}

				> div {
					padding: 10px 20px 10px 5px;
				}
			}
		}

		&:not(.has-feedback) #activity-header {
			margin-bottom: 0 !important;
		}

	}

	#user-status-huddle {
		margin: 0;
		width: 78px;
		padding: 16px;

		img {
			max-width: 45px;
			height: auto;
			border-radius: 50%;
			box-shadow: none;
			display: inline-block;
			margin-right: 15px;
			vertical-align: middle;
			image-rendering: -webkit-optimize-contrast; // To solve blurry image issue in chrome
		}

		.user-name {
			display: none;
		}

		#bp-activity-privacy {
			display: none;
		}
	}

	.activity-post-avatar {
		display: inline-block;
	}

	// these ID's need replacing with this!
	//.content-wrap { // #whats-new-content

	#whats-new-placeholder,
	#whats-new {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		outline: none;
		box-shadow: none;
		overflow: hidden;
		padding: 10px 15px 10px 0;
		min-height: 77px;
		height: auto !important;
		resize: none !important;
		border-radius: 0 4px 4px 0;
	}

	#whats-new-form-placeholder #whats-new-toolbar,
	#whats-new-form #whats-new-toolbar {
		padding: 12px 16px;
		background-color: $light-grey;
		border-top: 1px solid $bp-border-color;

		.medium-editor-placeholder {
			background-color: transparent;
		}
	}

	.whats-new-form-footer {
		display: flex;
		justify-content: space-between;
		background-color: $light-grey;
		border-top: 1px solid $bp-border-color;
	}

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

		.whats-new-form-footer {
			flex-direction: column;
			align-items: center;
			padding-top: $pad-med;
		}

		.activity-form.focus-in #activity-form-submit-wrapper {
			padding: 0 15px;
		}

		#whats-new-form.activity-form.has-draft #discard-draft-activity {
			padding: 0 10px 0 5px;
		}

		.activity-form.focus-in .whats-new-form-header #user-status-huddle {
			flex-wrap: wrap;

			.activity-post-name-status {
				max-width: 50%;
			}
		}

	}

	#whats-new-toolbar .post-elements-buttons-item.disable,
	#whats-new-toolbar .post-elements-buttons-item.no-click:not(.active) {
		pointer-events: initial;

		a.toolbar-button {
			cursor: default;

			&:before,
			&:after {
				display: none;
			}
		}

	}

	#whats-new-content-placeholder,
	#whats-new-content {
		padding: 0;
		width: calc(100% - 70px);
	}

	.edit-activity-content-wrap #whats-new-content {
		width: 100%;
	}

	#whats-new-attachments {
		padding: 10px;
	}

	#whats-new-elements-buttons {
		margin: 1em 0;

		ul {
			list-style: none;

			li {
				display: inline-block;
			}
		}
	}

	.activity-form:not(.focus-in) {

		#whats-new,
		#whats-new:before,
		#whats-new-form #whats-new-toolbar {
			cursor: pointer;
		}

		#whats-new-toolbar.hidden {
			display: none;
		}

	}

	#editor-toolbar {
		display: none;
	}

	&.modal-popup {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		padding: 10px 0;
		background-color: rgba(250, 251, 253, 0.9);
		box-shadow: 0 6px 24px 0 rgba(18, 43, 70, 0.1);
		z-index: 999991;
		display: flex;
		align-items: center;
		justify-content: center;
		max-height: 100%;
		overflow: auto;

		.activity-update-form-overlay {
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
		}

		.whats-new-scroll-view {
			max-height: calc(100vh - 280px);
			min-height: 150px;
			overflow: auto;
			width: 100%;
			padding-bottom: 10px;
		}

		.focus-in--privacy .whats-new-scroll-view {
			min-height: auto;
			padding-bottom: 0;
		}

		#whats-new-form {
			width: 800px;
			max-width: 90%;
			margin: auto;
			box-shadow: 0 6px 24px 0 rgba(18, 43, 70, 0.1);

			@media screen and (max-width: 768px) and (min-height: 550px) {

				.bb-is-mobile & {
					top: -70px;
				}

			}
		}

		.gif-media-search-dropdown {
			top: initial;
			bottom: 30px;

			.gif-search-results {
				min-height: 320px;
				max-height: 320px;

				@media screen and (max-height: 540px) {
					min-height: 190px;
					max-height: 190px;
				}
			}

		}

		.emojionearea .emojionearea-picker {
			top: inherit;
			left: initial;
			right: 30px;
			bottom: -50px;
			margin-bottom: 10px;
			height: 305px;
			z-index: 999;

			@media screen and (min-width: 1200px) {
				left: unset;
				right: -138px;
				bottom: 25px;
			}

			.emojionearea-wrapper {
				height: 230px;

				.emojionearea-scroll-area {
					height: 220px;
					bottom: -75px;
				}

				&:after {
					bottom: -12px;
					top: inherit;
					left: initial;
					right: -14px;
					transform: rotate(90deg);
					display: none; // Hide emoji area marker

					@media screen and (min-width: 1200px) {
						bottom: -85px;
						right: 142px;
						transform: rotate(180deg);
					}
				}
			}

			@media screen and (max-width: 390px) {
				height: 190px;
				width: 270px;
				right: -10px;
				bottom: 25px;

				.emojionearea-search {
					width: 120px;
				}

				.emojionearea-filters .emojionearea-filter {
					width: 30px;

					img.emojioneemoji {
						height: 20px !important;
						width: 20px !important;
					}

				}

				.emojionearea-wrapper {
					width: 270px;
					height: 190px;

					.emojionearea-scroll-area {
						height: 105px;
						bottom: 0;
					}

					&:after {
						bottom: -10px;
						top: inherit;
						left: initial;
						right: 14px;
						transform: rotate(181deg);
					}

				}
			}
		}

		.bp-activity-edit.loading {

			text-align: center;

			#whats-new-content {

				position: relative;

				&:after {
					content: "\ef30";
					font: normal normal 400 22px/1 "bb-icons";/* stylelint-disable-line */
					margin: 10px auto;
					display: inline-block;
					text-align: center;
					color: #939597;
					animation: spin 2s infinite linear;
					position: absolute;
					top: 15px;
				}

			}
		}

		.dropzone .dz-preview.dz-complete .dz-progress {
			display: none;
		}

		#user-status-huddle {
			padding: 25px 25px 16px 25px;
		}

		#whats-new-form #whats-new-attachments {
			padding: 0 25px;
		}

	}

	// close @media
}

.atwho-container .atwho-view {
	z-index: 999999;
}

@media (max-width: 400px) {

	.atwho-view ul li {
		font-size: 14px;
		line-height: 20px;
		padding: 8px 10px;
	}

	.atwho-view ul li img {
		height: 20px;
		margin: 0 10px 0 0;
		width: 20px;
	}

	.atwho-view ul li .username {
		margin: 0;
		padding: 0;
	}

	.atwho-view ul li small {
		margin-left: 0;
	}

}

#whats-new-toolbar {
	padding: 10px;
}

#whats-new-toolbar,
#whats-new-messages-toolbar,
#whats-new-formatting-toolbar {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;

	.post-elements-buttons-item {
		margin-right: 10px;
		position: relative;
	}
}

#whats-new-messages-toolbar,
.activity-form #whats-new-toolbar {

	.post-elements-buttons-item {
		line-height: 1;
	}

}

.bbp-reply-form #whats-new-toolbar,
.bbp-topic-form #whats-new-toolbar {

	.medium-editor-toolbar {
		top: inherit;
		bottom: 6px;
		left: 40px;
		visibility: hidden;
		z-index: 99;
		background-color: #fff;
		opacity: 0;
		transition: all ease 0.3s;
		height: 0;
		right: 0;
		overflow: hidden;
		border-radius: 0;

		&.active {
			display: block;
			border-radius: 0;
			z-index: 1;
			opacity: 1;
			visibility: visible;
			bottom: 13px;
			height: 40px;

			div & {
				bottom: 13px;
			}
		}

		&.medium-editor-toolbar-active {
			opacity: 1;
		}

		.medium-editor-toolbar-actions {
			background-color: transparent;
			height: auto;

			button.medium-editor-button-first {
				padding-right: 6px;
			}

			button {
				box-shadow: none;
				padding: 10px 10px 10px 0;
				min-width: 30px;
				border: 0;
				background-color: transparent !important;

				&.medium-editor-button-active {
					background: none transparent !important;
				}

				&.medium-editor-action-close {
					padding-right: 0;
				}

			}

		}

		.medium-editor-toolbar-form .medium-editor-toolbar-input {
			width: calc(100% - 80px);
			margin-bottom: 0;

			&::-webkit-input-placeholder {
				color: #4d5c6d;
			}
		}
	}
}

.medium-editor-toolbar-form .medium-editor-toolbar-input.isNotValid {

	&.validate {
		color: #ef3e46 !important;
		border-color: #f5858a !important;
	}
}

.medium-editor-toolbar,
.buddypress .medium-editor-toolbar {

	.medium-editor-toolbar-actions {

		button {
			color: rgba(18, 43, 70, 0.4);

			&.medium-editor-button-active {
				color: #122b46;
			}
		}
	}
}

.activity-update-form {

	#activity-header h3 {
		font-size: 20px;
		margin: 0;
	}

	.activity-link-preview-container {
		margin-bottom: 20px;
	}


	.medium-editor-toolbar {
		top: inherit;
		bottom: 9px;
		left: 11px;
		visibility: hidden;
		z-index: 99;
		background-color: transparent;
		transition: bottom ease 0.3s;
		height: 0;
		width: 100%;
		max-width: calc(100% - 130px);
		overflow: hidden;
		display: none;

		.medium-editor-action-more {
			position: relative;

			.medium-editor-action-more-button b:before {
				content: "\ee5c";
				font-family: 'bb-icons'; /* stylelint-disable-line */
				font-weight: 300;
			}

			.medium-editor-action-more-button.active b:before {
				color: #000;
			}

			> ul {
				position: absolute;
				width: auto;
				top: -30px;
				left: 10px;
				transform: translateX(-50%);
				background: #fff;
				border: 1px solid #e1e3e6;
				box-sizing: border-box;
				box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.13);
				border-radius: 4px;
				display: none;

				&:after {
					content: "";
					position: absolute;
					bottom: -7px;
					left: 50%;
					width: 0;
					height: 0;
					box-sizing: border-box;
					border: 6px solid #000;
					border-color: transparent transparent #fff #fff;
					-webkit-transform-origin: 0 0;
					-ms-transform-origin: 0 0;
					transform-origin: 0 0;
					-webkit-transform: rotate(-45deg) translateX(-50%);
					-ms-transform: rotate(-45deg) translateX(-50%);
					transform: rotate(-45deg) translateX(-50%);
					-webkit-transition: all linear 0.2s;
					transition: all linear 0.2s;
					z-index: 101;
					display: none;
				}

				button {
					padding: 5px !important;
					height: auto !important;

					b {
						display: inline-block;
						height: auto;
					}
				}

				.medium-editor-action-h3,
				.medium-editor-action-h4 {
					position: relative;

					&:after {
						position: absolute;
						right: 3px;
						top: 50%;
						transform: translateY(-50%);
					}
				}
			}

			&.active > ul {
				display: flex;
			}
		}

		&.active {
			border-radius: 0;
			z-index: 10;
			visibility: visible;
			overflow: visible;
			height: auto;

			.medium-editor-toolbar-actions {
				overflow: visible;
			}
		}

		.medium-editor-toolbar-actions {
			background-color: transparent;
			padding: 0;
			height: 44px;

			button.medium-editor-button-first {
				padding-right: 6px;
			}

			button {
				box-shadow: none !important;
				padding: 0 10px 0 0;
				height: 35px;
				min-width: 30px;
				border: 0;
				background-color: transparent !important;

				&.medium-editor-button-active {
					background: none transparent !important;
				}

				&.medium-editor-action-close {
					padding-right: 0;
				}

			}

		}

		.medium-editor-toolbar-form .medium-editor-toolbar-input {
			width: calc(100% - 80px);
			margin-bottom: 0;

			&::-webkit-input-placeholder {
				color: #4d5c6d;
			}
		}

	}

	.medium-editor-toolbar .medium-editor-toolbar-form-active {
		position: absolute;
		left: 15px;
		bottom: 5px;
		box-shadow: none;
		width: calc(800px - 40px);
		max-width: calc(100vw - 55px - 10%);
		padding: 0 !important;
	}

	.activity-attached-gif-container {
		margin-bottom: 0;
		height: auto !important;
		max-width: 100%;

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

			min-height: auto !important;
		}

		.gif-image-container img {
			max-width: 100%;
		}
	}

	#whats-new {

		h3,
		h4 {
			font-size: 17px;
			font-weight: 500;
			margin: 0 0 15px;
		}

		h4 {
			font-size: 16px;
		}
	}

}

.bbpress #bbpress-forums #whats-new-toolbar.media-off,
.bp-messages-content #bp-message-content #whats-new-messages-toolbar .media-off +,
.buddypress #buddypress.buddypress-wrap .activity-update-form.media-off #whats-new-content,
.buddypress #buddypress.buddypress-wrap .bbp-reply-form #whats-new-toolbar.media-off,
.buddypress #buddypress.buddypress-wrap .bbp-topic-form #whats-new-toolbar.media-off {

	.medium-editor-toolbar {
		visibility: visible;
		height: 44px;
		left: 0;
		opacity: 1;
		border-radius: 0;

		.medium-editor-toolbar-actions {
			opacity: 0.4;

			li {
				pointer-events: none;
			}
		}

		&.medium-editor-toolbar-active .medium-editor-toolbar-actions {
			opacity: 1;

			li {
				pointer-events: auto;
			}

		}

	}
}

.bp-messages-content #bp-message-content #whats-new-messages-toolbar .media-off + .medium-editor-toolbar {
	bottom: -11px;
	left: 0;
}

.activity-update-form .focus-in .medium-editor-toolbar {
	display: block;
}

// these ID's need replacing with this!
//.textarea-wrap { // #whats-new-textarea
#whats-new-textarea-placeholder,
#whats-new-textarea {

	[contenteditable="true"] {

		&:empty:before {
			content: attr(placeholder);
			color: #bbb;
			cursor: text;
			display: block; /* For Firefox */
		}
	}
}

#activity-form-submit-wrapper {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	padding: 0 10px;
}

#whats-new-post-in-box {
	margin: $marg-sml 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-flow: row wrap;
	flex-flow: row wrap;

	#activity-autocomplete {
		font-size: 15px;
		padding: 2px 10px;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
}

.activity-autocomplete-wrapper {
	position: relative;
	display: block;

	&:before {
		content: "\ef10";
		font-family: 'bb-icons';/* stylelint-disable-line */
		speak: none;
		display: inline-block;
		width: 1em;
		font-size: 20px;
		line-height: 1;
		color: rgba(18, 43, 70, 0.4);
		position: absolute;
		top: 50%;
		left: 15px;
		transform: translate(0, -50%);
		z-index: 5;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.activity-autocomplete-clear {
		display: none;
		position: absolute;
		top: 50%;
		right: 12px;
		transform: translate(0, -50%);
		z-index: 6;
		width: 15px;
		height: 15px;
		cursor: pointer;

		i {
			font-size: 15px;
			font-weight: 200;
			line-height: 1;
			color: rgba(18, 43, 70, 0.4);
			display: block;
		}
	}
}

.activity-is-autocomplete .activity-autocomplete-wrapper .activity-autocomplete-clear {
	display: inline-block;
}

#whats-new-post-in-box-items {
	list-style: none;
	position: relative;
	width: 100%;

	#activity-autocomplete {
		width: 100%;
		border-radius: 3px;
		padding: 5px 35px 5px 48px;
		height: 44px;
		position: relative;
		z-index: 2;
		background-color: transparent;
	}

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

	.bp-activity-object {
		padding: 5px 10px;

		label {

			@include center-vert();
			cursor: pointer;
		}

		.privacy-radio {
			margin-left: auto;
		}

		.avatar {
			width: 30px;
			border-radius: 4px;
			margin-right: 15px;
		}

		.bp-item-name {
			font-size: 15px;
			font-weight: 500;
			vertical-align: middle;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		&:focus,
		&:hover {
			cursor: pointer;
		}

		button.bp-remove-item {
			padding: 0;
			border: 0;
			background: transparent;
			font-size: 17px;
			margin: 0 6px;
		}
	}
}

#whats-new-post-in {
	margin-right: $marg-sml;
	display: none;
}

#bp-activity-group-ac-items {
	min-width: 200px;
	max-height: 230px;
	overflow-y: auto;
	padding: 0;
	margin: 10px 0 0;
	width: 100%;
	z-index: 11;
	position: relative;

	&:empty {
		display: none;
	}

	> .dashicons {
		display: block;
		margin: 5px auto;
	}

	.groups-selection {
		position: relative;
		padding: 0 30px;
		margin: 15px 0 0;
		display: flex;
		align-items: center;
		font-size: 15px;

		.animate-spin {
			margin-right: 10px;
		}
	}

	&.group_scrolling--revive {
		overflow-y: visible;
	}
}

#bp-activity-group-ac-items::-webkit-scrollbar {
	width: 12px;
}

#bp-activity-group-ac-items::-webkit-scrollbar-thumb {
	border: 4px solid rgba(0, 0, 0, 0);
	background-clip: padding-box;
	border-radius: 9999px;
	background-color: #a4acb4;
}

.bp-item-opt {
	content: "";
	display: inline-block;
	vertical-align: middle;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	width: 22px;
	height: 22px;
	line-height: 1;
	background-color: #fff;
	border: 2px solid #d6dce6;
	border-radius: 100%;
	margin-right: 10px;
	margin-left: auto;
}

#whats-new-submit {
	margin: $marg-sml 0 $marg-sml auto;
	display: flex;
	flex-flow: row-reverse;
	position: relative;

	input {

		@include font-size(14);
		line-height: 1;
	}
}

#activity-post-form-privacy {
	line-height: 1;
}

.bp-activity-privacy {
	font-size: 16px;
}

.bb-document-privacy-wrap,
.bb-media-privacy-wrap {
	display: inline-block;
	position: relative;

	.privacy-wrap {
		display: inline-block;
	}

	.privacy {
		display: flex;
		align-items: center;
		cursor: pointer;
		line-height: 1;

		&:before {
			content: "\eeaa";
			font-family: 'bb-icons';/* stylelint-disable-line */
			font-size: 16px;
			vertical-align: middle;
			display: inline-block;
		}

		&:after {
			content: "\e826";
			font-family: 'bb-icons';/* stylelint-disable-line */
			font-size: 20px;
			vertical-align: middle;
			display: inline-block;
			line-height: 1;
		}

		&.no-change:after {
			display: none;
		}

		&.onlyme:before {
			content: "\eecc";
		}

		&.loggedin:before {
			content: "\e95d";
		}

		&.friends:before {
			content: "\ef5b";
		}

		&.loading:before {
			content: "\ef30";
			animation: spin 2s infinite linear;
		}
	}

	.activity-privacy {
		display: none;
		margin: 0;
		position: absolute;
		background: #fff;
		box-shadow: 0 2px 7px 1px rgba(0, 0, 0, 0.05), 0 6px 32px 0 rgba(18, 43, 70, 0.1);
		border-radius: 4px;
		padding: 5px 0;
		min-width: 200px;
		left: -20px;
		top: 35px;
		z-index: 119;

		&:before {
			content: " ";
			position: absolute;
			width: 0;
			height: 0;
			top: 0;
			left: 20px;
			border: 6px solid #000;
			border-color: #fff #fff transparent transparent;
			-webkit-transform-origin: 0 0;
			-ms-transform-origin: 0 0;
			transform-origin: 0 0;
			-webkit-transform: rotate(-45deg);
			-ms-transform: rotate(-45deg);
			transform: rotate(-45deg);
			box-shadow: 2px -3px 3px 0 rgba(0, 0, 0, 0.02);
			z-index: 1002;
		}

		li {
			cursor: pointer;
			line-height: 1;
			margin: 0;
			padding: 10px 14px;
			position: relative;
			display: flex;
			align-items: center;
			margin-bottom: 1px;

			&:hover {
				background: #f5f5f5;
			}
		}

		.selected {
			background: #f5f5f5;
		}
	}

	.activity-privacy.bb-open {
		display: block;
	}
}

.activity-privacy {

	> li {

		a {
			color: #7f868f;
		}

		&:before {
			content: "\eecc";
			font-family: 'bb-icons';/* stylelint-disable-line */
			font-size: 16px;
			vertical-align: middle;
			display: inline-block;
			margin-right: 10px;
			width: 20px;
			text-align: center;
			font-weight: 400;
		}

		&.public:before {
			content: "\eeaa";
		}

		&.onlyme:before {
			content: "\eecd";
		}

		&.loggedin:before {
			content: "\e95d";
		}

		&.friends:before {
			content: "\ef5b";
		}

		&.bb-edit-privacy {

			&:before {
				display: none;
			}

			a:before {
				content: "\eecc";
				font-family: 'bb-icons';/* stylelint-disable-line */
				font-size: 16px;
				margin-right: 10px;
				width: 20px;
				text-align: center;
				display: inline-block;
				vertical-align: bottom;
				font-weight: 400;
			}

			&.public a:before {
				content: "\eeaa";
			}

			&.onlyme a:before {
				content: "\eecd";
			}

			&.loggedin a:before {
				content: "\e95d";
			}

			&.friends a:before {
				content: "\ef5a";
			}
		}
	}
}

.bb-media-model-container {

	.bb-media-privacy-wrap .activity-privacy {
		left: -5px;
		right: auto;
	}

	.bb-media-privacy-wrap .activity-privacy:before {
		left: 20px;
		right: auto;
	}

	.bb-media-privacy-wrap .activity-privacy {

		a {
			font-weight: 400;
		}
	}

}

// GIF styles
.gif-media-search {
	position: relative;
	max-width: 400px;
}

div[class*="attached-gif-container"] {
	position: relative;

	.gif-image-remove {
		border-radius: 10px;
		cursor: pointer;
		height: 19px;
		width: 19px;
		top: 5px;
		right: 5px;
		background-color: #f8f8f8;
	}

	.gif-image-overlay {
		color: #9ea8b3;
		margin-top: 0;
		position: absolute;
		text-align: center;

		.bb-icon-times {
			font-size: 20px;
			vertical-align: top;
			line-height: 20px;
		}
	}

	.gif-player {
		position: relative;
		max-width: 480px;

		video {
			margin: 0;
			max-width: 100%;
			border-radius: 4px;
		}
	}

	.gif-play-button {
		height: 60px;
		width: 60px;
		font-size: 60px;
		position: absolute;
		left: 50%;
		margin-left: -30px;
		top: 50%;
		margin-top: -30px;

		.bb-icon-play-thin {
			font-size: 80px;
			width: 80px;
			height: 80px;
			margin: 0;
			padding: 0;
		}
	}

	.gif-icon {
		background: url(../images/GIF.svg) center no-repeat;
		position: absolute;
		display: block;
		height: 28px;
		width: 44px;
		bottom: 0;
		left: 0;
		border-radius: 0 4px 0 0;
		background-size: 28px;
		padding: 8px;
		background-color: #000;
		opacity: 0.45;
	}
}

#bbpress-forums div[class*="attached-gif-container"] {
	height: auto !important;
	width: auto !important;
	display: inline-block;
	max-width: 450px;
	background-image: none !important;
	min-width: 130px;
	min-height: 100px;

	&.closed {
		display: none;
	}
}

.gif-media-search-dropdown {
	position: absolute;
	top: 100%;
	z-index: 99;
	display: none;
	margin: 10px 0 0 -16px;
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 2px 7px 1px rgba(0, 0, 0, 0.05), 0 6px 32px 0 rgba(18, 43, 70, 0.1);
	padding-bottom: 10px;
	border: 1px solid #e7e9ec;

	&.open {
		display: block;
		width: 300px;
	}

	.gif-alert {
		justify-content: center;
		flex-flow: column;
		min-height: 100px;
		display: none;

		&.show {

			@include center-vert();
		}

		[class*="bb-icon"] {
			font-size: 30px;
			color: $black;
			opacity: 0.4;
		}

		p {
			color: $black;
			font-size: 13px;
			font-weight: 500;
			line-height: 1.5;
			opacity: 0.4;
		}

	}

}

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

	.gif-media-search-dropdown.open {
		width: 320px;
	}

}

.gif-search-query {
	background-color: #fff;
	border-radius: 4px 4px 0 0;
	position: relative;
	padding: 5px 10px 3px;
	margin: 0;
	border-bottom: 1px solid #e7e9ec;

	input[type="search"] {
		border: 0;
	}
}

.gif-search-content .gif-search-results {
	padding: 10px 10px 0;
	overflow: auto;
	min-height: 280px;
	max-height: 380px;

	ul {
		columns: 2 auto;
		column-gap: 4px;
		margin: 0;
		padding: 0;
		list-style: none;

		li {
			margin: 0 0 4px;
			padding: 0;
		}

		.bg1 {
			background: #e0245e;
		}

		.bg2 {
			background: #f45d22;
		}

		.bg3 {
			background: #ffad1f;
		}

		.bg4 {
			background: #17bf63;
		}

		.bg5 {
			background: #1c94e0;
		}

		.bg6 {
			background: #794bc4;
		}
	}
}

.found-media-item img {
	width: 100%;
	height: 100%;
	min-width: 100%;
	// min-width: 180px;
}

input.search-query-input {
	width: 100%;
}

#content .toolbar-button {
	box-shadow: none;
}

.ac-input,
.medium-editor-element {

	font[color] {
		color: inherit; //Fix font tag dictating color
	}

}

// Topic selector styles
.whats-new-topic-selector {
	position: relative;
	margin-right: 8px;

	.bb-topic-selector-button {
		display: block;
		cursor: pointer;
		padding: 6px 25px 6px 12px;
		border-radius: $block-radius-inner;
		background-color: $white;
		border: 1px solid $bp-border-color;
		font-size: 14px;
		color: $black;
		max-width: 160px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;

		&:after {
			content: "\e826";
			font-family: 'bb-icons';/* stylelint-disable-line */
			font-size: 20px;
			line-height: 1;
			position: absolute;
			top: 50%;
			right: 5px;
			transform: translateY(-50%);
		}
	}

	.bb-topic-selector-list {
		position: absolute;
		top: 45px;
		left: 0;
		width: 200px;
		display: none;

		ul {
			list-style: none;
			margin: 0;
			padding: 8px;
			background-color: $white;
			border-radius: $block-radius;
			max-height: 160px;
			overflow: auto;
			margin-bottom: 30px;
			box-shadow: 0 2px 7px 1px rgba(0, 0, 0, 0.05), 0 6px 32px 0 rgba(18, 43, 70, 0.1);

			a {
				display: block;
				padding: 5px 15px;
				border-radius: $block-radius-inner;
				color: $black;
				font-size: 13px;
				font-weight: 400;
				text-decoration: none;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;

				&.selected {
					font-weight: 600;
				}

				&:hover {
					background-color: $light-grey;
				}
			}
		}
	}

	#whats-new-topic-selector {
		display: none;
	}

	&.is-active {

		.bb-topic-selector-list {
			display: block;
		}
	}
}

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

	.bbp-topic-form #whats-new-toolbar {

		.medium-editor-toolbar-actions {

			button {
				padding: 10px 5px 10px 0;

				&.medium-editor-button-first {
					padding-left: 5px !important;
				}
			}
		}

	}

}

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

	.bbp-topic-form #whats-new-toolbar {

		.medium-editor-toolbar-actions button {
			padding: 10px 0;
		}
	}
}

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

	.whats-new-topic-selector {
		order: -1;
		display: block;
		width: 60%;
		text-align: center;
		max-width: 350px;
		margin: 15px 20% 5px;

		.bb-topic-selector-button {
			width: 100%;
			max-width: 350px;
			justify-content: center;
		}

		.bb-topic-selector-list {
			top: 60px;
			left: 50%;
			transform: translateX(-50%);
			z-index: 9;
		}
	}

	.activity-update-form .activity-form.focus-in #activity-form-submit-wrapper:has(.whats-new-topic-selector) {
		justify-content: center;

		#whats-new-submit {
			margin-left: 0;
		}
	}
}

.media-support-hide,
.document-support-hide,
.video-support-hide,
.post-emoji-hide,
.post-gif-hide {
	display: none;
}

/* Topic tooltip */
.bb-topic-tooltip-wrapper {
	position: absolute;
	z-index: 99999;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s;
	bottom: calc(100% + 15px);
	left: 50%;
	transform: translateX(-50%);

	&.active {
		opacity: 1;
		pointer-events: auto;
	}

	.bb-topic-tooltip {
		background: #1e2132;
		color: #fff;
		padding: 4px 14px;
		border-radius: 4px;
		font-size: 12px;
		font-weight: 600;
		white-space: nowrap;
		box-shadow: 0 2.45px 3.68px 0 rgba(0, 0, 0, 0.15);
		position: relative;
	}

	&:after {
		content: "";
		position: absolute;
		bottom: -7px;
		left: 50%;
		transform: translateX(-50%);
		border-width: 7px 7px 0 7px;
		border-style: solid;
		border-color: #1e2132 transparent transparent transparent;
		width: 0;
		height: 0;
		display: block;
	}
}