.enb-bg-media-select {
	display: grid;
	place-content: center;
	inline-size: 100%;
	block-size: 100px;
	padding: 16px;
	border: 2px dashed var(--enb-color-300);
	border-radius: 3px;
	background-color: var(--enb-color-50);
	cursor: pointer;
}

.enb-bg-media-select-button {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 4px;
	font-weight: 600;

	svg {
		inline-size: 32px;
		block-size: auto;
		fill: var(--enb-color-700);
	}
}

.enb-bg-media-container {
	position: relative;
	border-radius: 3px;
	min-block-size: 40px;
	overflow: hidden;
	background-color: var(--enb-color-200);

	video,
	img {
		display: block;
		inline-size: 100%;
	}
}

.enb-bg-media-action {
	position: absolute;
	inset-block-start: 12px;
	inset-inline-end: 12px;
	z-index: 10;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 8px;

	.enb-edit-button,
	.enb-remove-button {
		display: grid;
		place-content: center;
		inline-size: 32px;
		block-size: 32px;
		padding: 0;
		background: #fff;
	}
}

.enb-control-background {

	.enb-component-text {

		.components-base-control__label {
			text-transform: capitalize;
			font-size: 13px;
		}
	}
}

.enb-gradient-type {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.enb-component.enb-background-options {

	.components-flex-item .components-input-control__label {
		color: var(--enb-color-700);
		font-size: 13px !important;
		letter-spacing: 0.02em;
		text-align: start;
	}
}

.enb-animated-bg-buttons {

	.components-button {
		position: relative;
		flex: 1 1 50%;
		border-radius: 3px;
		block-size: 30px;
		box-shadow: none;

		&:hover::after {
			content: "Edit";
			position: absolute;
			inset: 0;
			display: grid;
			place-content: center;
			background-color: rgba(0, 0, 0, 0.5);
			font-size: 12px;
			letter-spacing: 0.05em;
			color: #fff;
		}

		&.has-color {
			background-size: cover;
		}

		&:first-child,
		&:last-child {
			border-radius: 3px;
			overflow: hidden;
		}
	}
}

.enb-animated-bg-preview {
	animation: animatedBgColors 10s infinite;
}

.enb-animated-gradient-bg-preview {
	background-size: 400% !important;
	animation: animatedGradientPosition 10s infinite;
}

@keyframes animatedGradientPosition {

	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}