/* Move media modal */
.bb-rl-modal-move-file {

	.bb-rl-modal-header  p {
		margin: 0;
		font-size: var(--bb-rl-font-size-base);
		font-weight: 600;
		line-height: var(--bb-rl-base-line);
	}

	.db-modal-buttons {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: var(--bb-rl-space-100);
		margin-top: var(--bb-rl-space-200);

		.bb-rl-button {
			font-size: 0.85rem;
		}
	}

	.bb-rl-field-wrap {
		padding: var(--bb-rl-space-200) var(--bb-rl-space-300);
	}

	.bb-rl-model-footer {
		display: flex;
		align-items: center;
		background-color: transparent;
		border-top: 1px solid var(--bb-rl-border-secondary-color);
		padding: var(--bb-rl-space-200) var(--bb-rl-space-300);
		gap: var(--bb-rl-space-100);

		.bb-rl-button {

			@include bb-rl-button--small;

			&.is-disabled {
				opacity: 0.6;
				cursor: default;
				pointer-events: none;
			}

			&.loading:after {
				content: "";
				display: inline-block;
				height: 18px;
				width: 18px;
				border: 2px solid var(--bb-rl-border-quaternary-color);
				border-top-color: var(--bb-rl-border-tertiary-color);
				border-radius: var(--bb-rl-radius-full);
				margin-left: var(--bb-rl-space-100);
				animation: spin 3s infinite linear;
			}
		}

		.bb-rl-create-album {
			display: flex;
			align-items: center;
			gap: var(--bb-rl-space-50);
			margin-right: auto;
			font-size: var(--bb-rl-font-size-sm);
			font-weight: 500;

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

	.bbm-model-wrap {

		label {
			font-size: var(--bb-rl-font-size-sm);
			line-height: 1.5;
			display: block;
			margin-bottom: var(--bb-rl-space-100);
		}

		input {
			font-size: var(--bb-rl-font-size-sm);
			height: 40px;
			padding: 0 var(--bb-rl-space-100);
			border-radius: var(--bb-rl-radius-md);
			border: 1px solid var(--bb-rl-border-tertiary-color);
			box-sizing: border-box;
			width: 100%;

			&.error {
				border-color: var(--Border-danger-secondary);
			}
		}

		.bb-rl-create-popup-folder-wrap,
		.bb-rl-create-popup-album-wrap {

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

			.bb-rl-dropdown-wrap {
				position: relative;

				select {
					font-size: var(--bb-rl-font-size-sm);
					background-color: var(--bb-rl-background-secondary-color);
					border: 1px solid var(--bb-rl-border-quaternary-color);
					border-radius: var(--bb-rl-radius-md);
					padding: 0 var(--bb-rl-space-200);
					height: 40px;
					width: 100%;
					appearance: none;
					-webkit-appearance: none;
					padding-right: var(--bb-rl-space-300);
				}
			}
		}
	}
}

.bb-rl-location-album-list-wrap {
	padding-top: var(--bb-rl-space-100);

	.bb-rl-breadcrumbs-append-ul-li .item {
		padding: var(--bb-rl-space-100) 0;
		display: flex;
		align-items: center;
		font-size: var(--bb-rl-font-size-sm);
		white-space: nowrap;

		span:not(:first-child):before {
			content: "\e13a";
			color: var(--bb-rl-icon-secondary-color);
			font-family: bb-icons-rl;
			font-size: 16px;
			vertical-align: middle;
			margin-right: var(--bb-rl-space-50);
		}
	}
}

/* Image Move Modal */
.bb-readylaunch-template .location-album-list {
	list-style: none;
	overflow: auto;
	max-height: 230px;
	min-height: 230px;
	padding: 0;
	margin: 0;
	border: 1px solid var(--bb-rl-border-secondary-color);
	border-radius: var(--bb-rl-radius-md);

	li {
		position: relative;

		span {
			display: flex;
			align-items: center;
			font-size: var(--bb-rl-font-size-sm);
			border-bottom: 1px solid var(--bb-rl-border-secondary-color);
			width: 100%;
			padding: var(--bb-rl-space-100) var(--bb-rl-space-200);
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			cursor: pointer;

			&.selected {
				background-color: var(--bb-rl-background-secondary-color);
			}

			&:before {
				content: "\e834";
				color: var(--bb-rl-icon-secondary-color);
				font-family: bb-icons-rl;
				font-size: 18px;
				margin-right: 12px;
			}
		}

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

	&.is-loading {
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: auto;
		max-height: 230px;
		min-height: 230px;

		.bb-icon-spinner {
			height: 24px;
		}

		.bb-icon-spinner:before {

			@include bb-rl-spinner;
			@include bb-rl-spinner--lg;
		}
	}
}

/* Video Thumbnail Modal */
.bb-rl-video-thumbnail-content {

	.bb-rl-video-thumbnail-custom {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		cursor: pointer;
		height: 155px;
		margin-right: 0;
		overflow: hidden;

		.bb-rl-close-thumbnail-custom {
			position: absolute;
			top: 5px;
			right: 5px;
			height: 14px;
			width: 14px;
			z-index: 111;
			border-radius: 50%;
			background: var(--bb-rl-background-color);
			color: var(--bb-rl-icon-tertiary-color);
			cursor: pointer;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;

			&:after {
				content: "\00d7";
				font-size: 14px;
				line-height: 1;
				position: relative;
				top: -1px;
				left: 0;
			}
		}

		img {
			height: 100%;
			width: 100%;
			margin: 0;
			display: block;
			min-height: 120px;
			border-radius: 4px;
			max-width: inherit;
			cursor: pointer;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}
	}

	.bb-dropzone-wrap {
		flex-basis: 33.333334%;
		width: 33.333334%;
		padding: 0;
		position: relative;
		min-height: 160px;
		padding-right: 10px;

		.bb-rl-video-thumbnail-custom {
			border: 3px solid transparent;
			border-radius: var(--bb-rl-radius-md);
		}

		.bb-rl-custom-check[name="bb-video-thumbnail-select"] {
			position: absolute;
			opacity: 0;

			+ label {
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				z-index: 11;
				opacity: 0;
			}
		}

		.bb-rl-custom-check[name="bb-video-thumbnail-select"]:checked ~ .bb-rl-video-thumbnail-custom {
			border-color: var(--bb-rl-primary-color);
			overflow: hidden;

			img {
				border-radius: 0;
			}

		}

		.bb-action-check-wrap {
			visibility: visible;
			opacity: 1;
			top: inherit;
			bottom: 7px;
			right: 7px;
			left: inherit;
			z-index: 1111;
			display: none;

			[class*=" bb-icon-"] {

				border: 2px solid var(--bb-rl-background-color);
				background-color: rgba(255, 255, 255, 0.40);/* stylelint-disable-line */

				&:before {
					display: none;
				}

			}

			.bb-rl-custom-check:checked + label .bb-icon:before {
				content: "\e876";
				display: inline;
				font-family: "bb-icons";/* stylelint-disable-line */
			}

		}

		.bb-rl-custom-check:checked ~ .bb-rl-field-wrap .dropzone .dz-preview .dz-image {
			border-color: var(--bb-rl-primary-color);
		}

		.bb-rl-field-wrap {
			margin-bottom: 0;
			position: relative;
			z-index: 111;
		}

		.dropzone {
			max-height: 160px;
			overflow: hidden;

			&.dz-started {
				margin: 0;
			}

			.dz-default {
				margin: 0;
				padding: 15px 0;
				min-height: auto;
				height: 160px;

				.dz-button,
				.dz-button:hover {
					padding: 50px 15px 0 15px;
				}

			}

			.dz-preview {
				margin: 0;
				padding: 0;
				width: 100%;
				z-index: initial;

				.dz-image {
					height: 160px;
					position: relative;

					img {
						max-width: inherit;
						cursor: pointer;
						border-radius: var(--bb-rl-radius-md);
						height: 100%;
						width: 100%;
						margin: 0;
						display: block;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -50%);
						position: absolute;
					}
				}

				.dz-remove:after {
					font-size: 19px;
				}
			}

			.dz-button {
				position: relative;

				&:before {
					content: "\e10e";
					font-family: bb-icons-rl;
					font-weight: 500;
					position: absolute;
					top: -10px;
					left: 50%;
					transform: translateX(-50%);
				}
			}

			.dz-complete {

				.dz-progress-ring-wrap {
					display: none !important;
				}
			}
		}
	}

	.bb-rl-video-thumbnail-auto-generated {
		flex-basis: 100%;
		width: 100%;
		margin-bottom: 15px;

		&.disabled {
			opacity: 0.7;
			pointer-events: none;
			user-select: none;
		}

		.bb-rl-video-thumb-list {
			margin: 0;
			padding: 0;
			display: flex;
			height: 100%;

			&.loading {
				text-align: center;
			}

			li {
				width: 33.333333%;
				flex: 0 0 33.333333%;
				max-width: 33.333333%;
				height: 100%;
				padding: 0 10px 0 0;
				margin: 0;
				list-style: none;
				display: flex;

				.bb-rl-custom-check {
					position: absolute;
					opacity: 0;
				}

				.bb-rl-custom-check:checked ~ a {
					border-color: var(--bb-rl-primary-color);

					img {
						border-radius: var(--bb-rl-radius-md);
					}

				}

				> div > label {
					position: absolute;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					z-index: 1;

					[class*=" bb-icon-"] {
						display: none;
					}

				}

				.bb-action-check-wrap {
					visibility: visible;
					opacity: 1;
					top: inherit;
					bottom: 7px;
					right: 7px;
					left: inherit;

					[class*=" bb-icon-"] {

						border: 2px solid var(--bb-rl-background-color);
						background-color: rgba(255, 255, 255, 0.40);/* stylelint-disable-line */

						&:before {
							display: none;
						}
					}
				}

				> div,
				> div a {
					height: 100%;
					display: flex;
					position: relative;
					width: 100%;
				}

				> div > a {
					border: 3px solid transparent;
					border-radius: var(--bb-rl-radius-md);
				}

				img {
					min-height: 155px;
					max-height: 155px;
					border-radius: var(--bb-rl-radius-md);
					width: auto;
					height: 100%;
					margin: 0 auto;
					display: block;
				}
			}
		}
	}
}

.bb-rl-video-thumbnail-uploader {
	word-break: break-word;

	.bb-rl-modal-wrapper {
		max-width: 800px;
	}

	.thumbnail_notice {
		display: none;
	}

	.bb-rl-video-thumbnail-uploader-dropzone-select .dz-default {
		min-height: 100% !important;
	}

	.bb-rl-modal-container > p {
		margin-top: 25px;
		margin-bottom: 0;
	}

	.bb-rl-button.bb-rl-video-thumbnail-submit {

		&.saving:after {

			@include bb-rl-spinner;
			@include bb-rl-spinner--sm;
			margin-left: var(--bb-rl-space-50);
		}
	}

	&.generating_thumb {

		.thumbnail_notice {
			display: inline-block;
			margin-left: 10px;
			font-size: 12px;
		}

		.bb-rl-video-thumbnail-auto-generated .bb-rl-video-thumb-list li.bb_rl_thumb_loader {
			color: var(--bb-rl-text-secondary-color);
			background-color: var(--bb-rl-background-secondary-color);
			opacity: 1;
			margin: 0 10px 0 0;
			width: calc(33.3333% - 10px);
			padding: 0;
			flex-basis: calc(33.3333% - 10px);
			overflow: hidden;
			border-radius: var(--bb-rl-radius-md);
			min-height: 160px;
			text-align: center;
			align-items: center;

			.bb-rl-video-thumb-block {
				display: block;
				padding: 0 10px;

				> i {
					font-size: 25px;
					margin-bottom: 15px;
				}

				> span {
					display: block;
					font-size: 14px;
				}
			}
		}
	}

	.bb-rl-modal-mask {
		z-index: 999991;
	}

	&.no_ffmpeg {

		.bb-rl-video-thumbnail-content {

			.bb-rl-video-thumbnail-auto-generated {
				width: 33.3333%;
				display: inline-block;

				.bb-rl-video-thumb-list li {
					width: 100%;
					flex: 0 0 100%;
					max-width: 100%;
					height: 100%;
				}
			}

			.bb-dropzone-wrap {
				width: 33.333334%;
				display: inline-block;
				vertical-align: text-bottom;
			}
		}
	}

	&.no_generated_thumb .bb-rl-video-thumbnail-content .bb-rl-video-thumbnail-auto-generated {
		display: none;
	}

	.bb-rl-model-footer {
		border-top: 1px solid var(--bb-rl-border-secondary-color);

		.bb-rl-video-thumbnail-submit {

			&.is-disabled {
				opacity: 0.6;
				cursor: default;
				pointer-events: none;
			}
		}
	}
}

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

	.bb-rl-video-thumbnail-uploader {

		.bb-rl-modal-container {
			padding: 20px 15px 30px;
		}

		.bb-rl-modal-header {
			margin: -20px -15px 30px;
			flex-wrap: wrap;

			.bb-rl-video-thumbnail-uploader-modal-title {
				margin-right: 10px;
			}

			.thumbnail_notice {
				margin: 0;
			}
		}

		&.generating_thumb .bb-rl-video-thumbnail-auto-generated .bb-rl-video-thumb-list li.bb_rl_thumb_loader {
			min-height: 110px;

			.bb-rl-video-thumb-block {
				padding: 0 5px;

				> span {
					font-size: 12px;
				}
			}
		}
	}

	.bb-rl-video-thumbnail-content {
		flex-flow: column;

		.bb-dropzone-wrap {
			margin-bottom: 15px;
			min-height: 106px;
			vertical-align: top;
			width: 100%;

			.dropzone,
			.dropzone .dz-default,
			.bb-rl-video-thumbnail-custom img,
			.dropzone .dz-preview .dz-image {
				height: auto;
			}
		}

		.bb-rl-video-thumbnail-auto-generated .bb-rl-video-thumb-list li img {
			min-height: 100px;
			max-height: 106px;
		}

		.bb-action-check-wrap [class*=" bb-icon-"] {
			font-size: 11px;
			width: 18px;
			height: 18px;
		}

		.bb-rl-video-thumbnail-auto-generated {
			flex-basis: 100%;
			width: 100%;

			.bb-rl-video-thumb-list li {
				width: calc(33.3333334% - 6.66666667px);
				flex: calc(33.3333334% - 6.66666667px);
				margin-left: 10px;
				padding-left: 0;
				padding-right: 0;

				&:first-child {
					margin-left: 0 !important;
				}
			}
		}
	}

	.bb-rl-video-thumbnail-uploader.no_ffmpeg .bb-rl-video-thumbnail-content {

		.bb-dropzone-wrap {
			width: 100%;
		}

		.bb-rl-video-thumbnail-auto-generated {
			width: 100%;
			display: inline-block;

			.bb-rl-video-thumb-list {
				flex-wrap: wrap;

				li {
					width: 100%;
					flex: 0 0 100%;
					max-width: 100%;
					height: 100%;
					margin: 0;
				}
			}
		}
	}
}

/* Move Document Modal */
.bb-rl-location-folder-list-wrap {

	.bb-rl-breadcrumbs-append-ul-li .item {
		padding: var(--bb-rl-space-100) 0;
		display: flex;
		align-items: center;
		font-size: var(--bb-rl-font-size-sm);
		white-space: nowrap;

		span:not(:first-child):before {
			content: "\e13a";
			color: var(--bb-rl-icon-secondary-color);
			font-family: bb-icons-rl;
			font-size: 16px;
			vertical-align: middle;
			margin-right: var(--bb-rl-space-50);
		}

		span:not(.more_options) {
			cursor: pointer;
		}

		span.hidden {
			display: none !important;
		}
	}
}

.location-folder-list {
	overflow: auto;
	max-height: 230px;
	min-height: 230px;
	list-style: none;
	margin: 0;
	padding: 0;
	background-color: var(--bb-rl-background-color);
	border: 1px solid var(--bb-rl-border-tertiary-color);
	border-radius: 4px;

	li {
		position: relative;
		margin: 0;
		padding: 0;

		span {
			color: var(--bb-rl-text-secondary-color);
			padding: 8px 15px;
			border-bottom: 1px solid #e7e9ec;
			display: block;
			cursor: pointer;
			font-size: 14px;
			width: 100%;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;

			&.selected {
				background-color: var(--bb-rl-background-secondary-color);
			}

			&:before {
				content: "\e260";
				font-family: bb-icons-rl;
				color: var(--bb-rl-icon-secondary-color);
				margin-right: var(--bb-rl-space-100);
				font-size: 16px;
				vertical-align: middle;
			}
		}

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

		ul {
			display: none;
			margin: 0;
			padding: 0;
			list-style: none;
		}

		.sub-menu-anchor {
			position: absolute;
			right: 5px;
			top: 50%;
			color: var(--bb-rl-icon-secondary-color);
			font-size: 18px;
			line-height: 1;
			font-style: normal;
			cursor: pointer;
			transform: translateY(-50%);
			display: inline-block;
			height: auto;
			width: auto;
			transition: all ease 0.3s;

			&:before {
				content: "\e13a";
				font-family: bb-icons-rl;
			}
		}
	}

	&.is-loading {
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: auto;
		max-height: 230px;
		min-height: 230px;

		.bb-icon-spinner:before {

			@include bb-rl-spinner;
			@include bb-rl-spinner--lg;
		}
	}
}

// Activity like state popup
.bb-rl-activity-list .activity-state-popup {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 999999;
	background-color: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(2px);
	box-shadow: 0 6px 24px 0 rgba(18, 43, 70, 0.1);

	&.active {
		display: block;
	}

	.activity-state-popup_overlay {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
	}

	.activity-state-popup_inner {
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		background-color: var(--bb-rl-background-color);
		box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
		border: 1px solid var(--bb-rl-border-secondary-color);
		border-radius: var(--bb-rl-radius-lg);
		padding: var(--bb-rl-space-200) var(--bb-rl-space-300);
		width: 90%;
		max-width: 560px;
		max-height: 95vh;
		min-height: 250px;
		overflow: auto;
		overflow-x: hidden;
	}

	.activity-state-popup_title {
		display: flex;
		align-items: center;
		margin: 0 -24px var(--bb-rl-space-200);
		padding: 0 var(--bb-rl-space-300) var(--bb-rl-space-200);
		border-bottom: 1px solid var(--bb-rl-border-secondary-color);

		h4 {
			font-size: 18px;
			font-weight: 600;
			line-height: 1;
		}

		.bb-rl-state-popup-close-button {
			color: var(--bb-rl-text-color);
			font-size: 24px;
			line-height: 1;
			margin-left: auto;
		}
	}

	.reaction-loader {
		font-size: 18px;
		text-align: center;
		line-height: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 210px;
	}

	.activity-state_users.loading ~ .reaction-loader {
		min-height: auto;
	}

	.activity-state-popup_tab {

		.activity-state-popup_tab_panel {
			margin-bottom: 10px;

			ul {
				display: flex;
				flex-wrap: wrap;
				margin: 0;
				padding: 0;
				list-style: none;

				li {
					margin: 0;
					padding: 0;

					> a {
						display: flex;
						align-items: center;
						justify-content: center;
						color: var(--bb-rl-text-secondary-color);
						font-size: var(--bb-rl-font-size-sm);
						font-weight: 600;
						line-height: 1.5;
						padding: 5px var(--bb-rl-space-200);
						border-radius: var(--bb-rl-radius-md);
						min-width: 55px;

						> i,
						> img {
							font-size: 20px;
							line-height: 1;
							margin: 0 8px 0 0;
						}

						> img {
							width: 20px;
							height: 20px;
							object-fit: cover;

							&.custom {
								border-radius: 100%;
							}
						}

						> span {
							color: var(--bb-rl-text-secondary-color);
							font-size: var(--bb-rl-font-size-sm);
							font-weight: 500;
							line-height: 1;
						}

						&.active {
							background-color: var(--bb-rl-background-secondary-color);
						}
					}
				}
			}

			.bb-rl-all-reaction-count {
				margin-left: var(--bb-rl-space-50);
			}
		}

		.activity-state-popup_tab_item {
			display: none;

			.activity-state_users {
				max-height: 300px;
				overflow: auto;
				margin: 0 -25px;
				padding: 0 25px;
			}

			.reactions_loader {
				font-size: 18px;
				text-align: center;
				line-height: 1;
			}

			.activity-state_user {
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				padding: 10px 0;
				margin: 0;

				.activity-state_user__avatar {
					width: 40px;
					height: 40px;
					object-fit: cover;
					position: relative;
					margin-right: var(--bb-rl-space-300);

					img.avatar {
						width: 100%;
						max-width: 100%;
						border-radius: var(--bb-rl-radius-full);
					}

					.activity-state_user__reaction {
						display: flex;
						position: absolute;
						right: -12px;
						bottom: 0;

						> i {
							background-color: var(--bb-rl-background-color);
							font-size: 20px;
							font-weight: 200;
							line-height: 1;
							border-radius: var(--bb-rl-radius-full);

							&:before {
								margin: 0;
							}
						}

						> img {
							height: 20px;
							width: 20px;
							object-fit: cover;

							&.custom {
								border-radius: 100%;
							}
						}
					}
				}

				.activity-state_user__info {
					max-width: calc(100% - 75px);
				}

				.activity-state_user__data {
					display: flex;
					align-items: center;

					&:not(:last-child) {
						margin-bottom: var(--bb-rl-space-50);
					}
				}

				.followers-count {
					color: var(--bb-rl-text-tertiary-color);
					font-size: var(--bb-rl-font-size-sm);
					line-height: 1;
				}

				.activity-state_user__name {
					color: var(--bb-rl-text-color);
					font-size: 14px;
					font-weight: 500;
					line-height: 1.33;
					text-transform: capitalize;
					overflow: hidden;
					text-overflow: ellipsis;
					flex: 1;

					a {
						color: var(--bb-rl-text-color);
						font-size: 14px;
						font-weight: 500;
					}
				}

				.activity-state_user__role {
					color: var(--bb-rl-text-color);
					font-size: 11px;
					font-weight: 600;
					line-height: 1.8;
					border: 1px solid var(--bb-rl-border-quaternary-color);
					background-color: var(--bb-rl-background-tertiary-color);
					border-radius: 24px;
					padding: 0 var(--bb-rl-space-100);
					margin-left: var(--bb-rl-space-100);
					text-transform: capitalize;
					max-width: 100px;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}

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