.bb-rl-media-stream {

	.media-list,
	.video-list,
	.document-list,
	.bb-albums-list,
	#media-folder-document-data-table {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: var(--bb-rl-space-300);

		@media screen and (max-width: $xl) {
			grid-template-columns: repeat(3, 1fr);
		}

		@media screen and (max-width: $md) {
			grid-template-columns: repeat(2, 1fr);
		}

		@media screen and (max-width: $sm) {
			grid-template-columns: 1fr;
		}

		> .open-popup {
			position: absolute;
		}
	}

	.bb-rl-document {

		.document-data-table-head {
			display: none;
		}
	}
}

.bb-rl-media-directory-container {
	padding-bottom: var(--bb-rl-space-300);
}

.bb-rl-media-stream {
	padding: var(--bb-rl-space-300);
	background-color: var(--bb-rl-background-color);
	border-radius: var(--bb-rl-radius-lg);

	.media-list,
	.video-list,
	.document-list {

		.load-more {
			display: flex;
			align-items: center;
			justify-content: flex-start;

			.button {

				@include bb-rl-button;
				@include bb-rl-button-secondary-fill;
				font-size: var(--bb-rl-font-size-sm);
				padding: 6px var(--bb-rl-space-200);
				margin-right: 10px;
				line-height: var(--bb-rl-base-line-small);

				[class*="bb-icons-rl-"] {
					margin-left: 6px;
					font-size: 16px;
				}

			}

		}
	}

	.bb-item-thumb {
		position: relative;
		z-index: 1;

		.media-action-wrap,
		.video-action-wrap {
			position: absolute;
			top: var(--bb-rl-space-200);
			right: var(--bb-rl-space-200);
			z-index: 15;
			opacity: 1;
		}

		.bb-video-duration {

			@include bb-rl-label-heading-bolder;
			position: absolute;
			bottom: var(--bb-rl-space-200);
			left: var(--bb-rl-space-200);
			z-index: 2;
			opacity: 1;
			color: var(--bb-rl-text-white-color);
			padding: 6px var(--bb-rl-space-100);
			background-color: var(--bb-rl-background-black-color);
			border-radius: var(--bb-rl-radius-md);
		}

		.bb-item-cover-wrap {
			position: relative;
			overflow: hidden;
			padding-top: 100%;
			display: block;
			border-radius: var(--bb-rl-radius-lg);

			img {
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
				z-index: 0;
				min-height: 100%;
				width: auto;
				min-width: 100%;
				object-fit: cover;
			}
		}

		.bb-action-check-wrap {
			position: absolute;
			transition: 0.3s all;
			top: var(--bb-rl-space-200);
			left: var(--bb-rl-space-200);
			color: var(--bb-rl-text-white-color);
			width: 32px;
			height: 32px;
			text-align: center;
			line-height: 1;
			z-index: 2;
			visibility: hidden;
			opacity: 0;
		}
	}

	.bb-item-thumb {

		.media-action-wrap {
			opacity: 0;
			visibility: hidden;
			transition: opacity 0.2s ease, visibility 0.2s ease;

			&.more_option_active {
				visibility: inherit;
				opacity: 1;
			}
		}

		&:hover {

			.media-action-wrap,
			.bb-action-check-wrap {
				opacity: 1;
				visibility: visible;
			}

		}

		a.bb_more_options_action {
			background-color: var(--bb-rl-background-black-color);
			border: 1px solid var(--bb-rl-border-quinery-color);
			border-radius: 50%;
			display: inline-flex;
			justify-content: center;
			align-items: center;
		}

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

		.bb-custom-check + label {
			color: var(--bb-rl-text-white-color);
			position: relative;
			cursor: pointer;
			padding: 0;

			.bb-icons-rl-check-circle {
				font-size: 32px;
			}
		}

		&.selected {

			.bb-action-check-wrap {
				visibility: visible;
				opacity: 1;
			}

			.bb-custom-check + label {

				.bb-icons-rl-check-circle {
					position: relative;
				}

				.bb-icons-rl-check-circle::after {
					content: "";
					display: inline-block;
					width: 24px;
					height: 24px;
					background-color: var(--bb-rl-background-brand-primary-color);
					border-radius: 50%;
					position: absolute;
					top: 4px;
					left: 4px;
					z-index: 1;
				}

				.bb-icons-rl-check-circle::before {
					position: relative;
					z-index: 2;
				}
			}
		}
	}
}

.bb-rl-media-stream {

	.bb-rl-document {

		.media-folder_items {
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			background-color: var(--bb-rl-background-secondary-color);
			border: 1px solid var(--bb-rl-border-secondary-color);
			border-radius: var(--bb-rl-radius-lg);
			padding: var(--bb-rl-space-300) var(--bb-rl-space-200);

			.media-folder_actions {
				position: absolute;
				top: 12px;
				right: 12px;
				opacity: 1;
			}

			.media-folder_name {

				@include bb-rl-label-heading-md-bold;
				word-break: break-word;
				overflow-wrap: break-word;
				white-space: normal;
				color: var(--bb-rl-text-color);
			}

			.media-folder_name_edit_wrap {
				width: 100%;
				display: none;

				.media-folder_name_edit {
					width: 100%;
					max-width: 100%;
				}

				.error-box {
					display: none;
					margin-top: var(--bb-rl-space-50);
				}

				input.error {
					border-color: var(--bb-rl-border-danger-secondary-color);
					color: var(--bb-rl-text-danger-secondary-color);
				}

				input.error + .error-box {
					display: block;
				}
			}

			.media-folder_icon {
				margin-bottom: var(--bb-rl-space-100);

				i {
					font-size: 48px;
					color: var(--bb-rl-icon-tertiary-color);
				}
			}

			.media-folder_details {
				text-align: center;
			}

			.hide {
				display: none;
			}

			.media-folder_modified {

				@include bb-rl-label-heading;
				text-align: center;
				color: var(--bb-rl-text-tertiary-color);
				padding: 2px 0;
				margin-bottom: var(--bb-rl-space-50);
			}

			.media-folder_group {

				@include bb-rl-label-heading;
				text-align: center;
				color: var(--bb-rl-text-tertiary-color);
				padding: 2px 0;
			}

			.media-folder_visibility {

				@include bb-rl-label-heading;
				color: var(--bb-rl-text-tertiary-color);
				margin: auto 0 0;
			}
		}
	}
}

.bb-rl-documents-header-wrap {
	display: flex;
	align-items: center;
	padding-bottom: var(--bb-rl-space-200);
	margin-bottom: var(--bb-rl-space-200);
	border-bottom: 1px solid var(--bb-rl-border-secondary-color);
	gap: var(--bb-rl-space-100);

	.media-search-form {
		margin-right: auto;
	}

	.bb-media-actions {

		.bb-rl-button {

			i {
				font-size: 16px;
				margin-right: var(--bb-rl-space-50);
			}
		}
	}
}

.bb-rl-media-open-create-popup-folder,
.bb-rl-video-open-create-popup-album,
.bb-rl-document-open-create-popup-folder {
	margin-right: auto;
}

.bb-rl-media-single-folder {

	.bb-rl-media-stream {
		padding: 0;
	}
}

.bb-rl-media-header-wrap {

	.bp-media-header-wrap-inner {
		display: flex;
		align-items: center;
		padding-bottom: var(--bb-rl-space-200);
		margin-bottom: var(--bb-rl-space-200);
		border-bottom: 1px solid var(--bb-rl-border-secondary-color);
		gap: var(--bb-rl-space-100);
		justify-content: space-between;

		.bb-media-actions {
			display: flex;
			align-items: center;
			gap: var(--bb-rl-space-100);

			.media-folder_items {
				line-height: 1;
			}

			.bb-rl-button i {
				margin-right: var(--bb-rl-space-50);
			}
		}
	}

	.document-breadcrumb {
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		align-items: center;

		li {
			display: flex;
			align-items: center;
			gap: var(--bb-rl-space-50);

			&::after {
				display: inline-block;
				width: 4px;
				height: 4px;
				content: "";
				background-color: var(--bb-rl-background-tertiary-color);
				border-radius: 50%;
				margin: 0 var(--bb-rl-space-100) 0 var(--bb-rl-space-50);
			}

			&:last-child::after {
				display: none;
			}

			a {

				@include bb-rl-label-heading-bolder;
				color: var(--bb-rl-text-color);
				text-decoration: none;
			}
		}
	}
}

.bb-rl-media-container {

	.album-single-view {

		.bb-member-media-header {
			padding: 0;
		}
	}

	.bb-member-media-header {
		display: flex;
		margin: 0 0 var(--bb-rl-space-200);
		padding: 0 var(--bb-rl-space-300);

		.bb-media-meta {
			display: flex;
			align-items: center;
			gap: var(--bb-rl-space-100);
			margin-left: auto;

			a[disabled] {
				opacity: 0.7;
				pointer-events: none;
			}
		}
	}

	.bb-media-actions-wrap {
		display: flex;
		align-items: center;
		width: 100%;
		margin: 0 0 var(--bb-rl-space-300);

		.bb-media-actions,
		.bb-video-actions {
			margin-left: auto;

			.bb-add-media,
			.bb-add-video,
			.bb-create-album {

				i {
					font-size: 16px;
					margin-right: var(--bb-rl-space-50);
				}
			}
		}
	}
}

.bb-rl-media-actions-wrap {
	gap: 12px;
	margin-bottom: var(--bb-rl-space-200);
	padding-bottom: var(--bb-rl-space-200);
	border-bottom: 1px solid var(--bb-rl-border-secondary-color);

	&.bb-video-actions-wrap {
		display: flex;
		align-items: center;
	}

	.bb-media-actions-wrap {
		margin-bottom: 0;
	}

	.bb-member-media-header {
		margin: 0;
		padding: 0;
		gap: var(--bb-rl-space-100);

		.bb-select i,
		.bb-delete i {
			color: var(--bb-rl-icon-secondary-color);
			font-size: 20px;
		}
	}
}

.bb-rl-media-none {
	padding: var(--bb-rl-space-600) var(--bb-rl-space-700);

	.bb-rl-media-none-figure {
		text-align: center;
		margin-bottom: var(--bb-rl-space-200);

		> i {
			font-size: 40px;
			color: var(--bb-rl-icon-secondary-color);
		}
	}

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

		@include bb-rl-base-heading-xl;
		background-color: transparent;
		border: 0;
		text-align: center;
		justify-content: center;

		.bp-icon {
			display: none;
		}
	}

	.bb-media-actions-wrap {
		margin: 0;

		.bb-title {
			display: none;
		}

		.bb-media-actions,
		.bb-video-actions {
			margin: var(--bb-rl-space-300) auto 0;
		}
	}

	.bb-rl-media-actions-wrap {
		border: 0;
		padding: 0;
		margin: 0;
	}

	.bb-rl-media-none-actions {
		display: flex;
		gap: var(--bb-rl-space-100);
		justify-content: center;
		align-items: center;

		.bb-media-actions {
			margin: var(--bb-rl-space-300) 0 0;
		}

		.bb-rl-button i {
			margin-right: var(--bb-rl-space-50);
			font-size: 16px;
		}

		.bb-create-album {
			margin-top: var(--bb-rl-space-300);
		}
	}

	.bb-rl-media-none-description {
		font-size: 14px;
		color: var(--bb-rl-text-secondary-color);
		text-align: center;
	}
}

.bb-rl-popup-on-fly-create-folder,
.bb-rl-popup-on-fly-create-album {
	padding: var(--bb-rl-space-200) 0;

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

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

		select,
		input {
			width: 100%;
		}
	}

	.db-modal-buttons {
		text-align: right;

		a + a {
			margin-left: var(--bb-rl-space-100);
		}
	}
}

.bb-rl-media-stream {

	.bb-albums-list {
		list-style: none;
		padding: 0;
		margin: 0;

		img {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
			z-index: 0;
			min-height: 100%;
			width: auto;
			min-width: 100%;
			object-fit: cover;
			image-rendering: -webkit-optimize-contrast;
		}
	}

	.bb-album-cover-wrap {
		position: relative;

		.bs-cover-wrap {
			padding-top: 100%;
			position: relative;
			overflow: hidden;
			display: block;
			border-radius: var(--bb-rl-radius-lg);

			&::before {
				content: "";
				display: block;
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				z-index: 1;
				background-color: rgba(0, 0, 0, 0.3);
			}
		}

		.bb-album-content-wrap {
			position: absolute;
			bottom: 0;
			z-index: 11;
			left: 0;
			padding: var(--bb-rl-space-200);
			color: var(--bb-rl-text-white-color);
			width: 100%;
		}

		.bb-album-content-wrap {

			h4 {

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

			.bb-album_date {

				@include bb-rl-label-heading;
			}

			.bb-album_stats {
				display: flex;
				align-items: center;
				gap: var(--bb-rl-space-100);
				margin-top: var(--bb-rl-space-50);

				@include bb-rl-label-heading-bolder;

				> span {
					display: inline-flex;
					align-items: center;
					gap: var(--bb-rl-space-50);
				}

				i {
					font-size: 16px;
				}

				.bb-album_stats_spacer {
					display: inline-block;
					width: 4px;
					height: 4px;
					background-color: var(--bb-rl-background-tertiary-color);
					border-radius: 50%;
				}
			}
		}
	}
}
