.bb-rl-image-headline {

	h3 {

		@include bb-rl-base-heading;
		color: var(--bb-rl-text-color);
		margin: 0 0 var(--bb-rl-space-100);
	}
}

.bb-rl-cover-container {
	position: relative;
	width: 100%;
	height: 160px;

	&.bb-rl-cover-container--has-cover {

		.bb-rl-cover-preview {
			opacity: 1;
			z-index: 10;
		}

		.bp-uploader-window,
		.bp-cover-image {
			opacity: 0;
		}
	}

	&.bb-rl-cover-container--no-cover {

		.bp-cover-image {
			opacity: 1;
		}
	}

	.bb-rl-cover-preview {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 0;
		border: 1px solid var(--bb-rl-border-secondary-color);
		border-radius: var(--bb-rl-radius-lg);
		opacity: 0;

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			position: relative;
			z-index: 10;
			border-radius: var(--bb-rl-radius-lg);
		}

		.bb-rl-remove-cover-button {
			position: absolute;
			top: var(--bb-rl-space-100);
			right: var(--bb-rl-space-100);
			z-index: 11;
			color: var(--bb-rl-text-white-color);
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 16px;
			height: 16px;
			background-color: var(--bb-rl-background-color);
			border-radius: var(--bb-rl-radius-sm);

			i {
				font-size: 12px;
				font-weight: 400;
				color: var(--bb-rl-icon-secondary-color);
			}
		}
	}

	.bp-cover-image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 5;
	}

	.bp-uploader-window {

		.bb-rl-drag-drop-wrapper {
			width: 100%;
			height: 160px;
			padding: 0;
		}
	}
}
