/*************** Background Panel ********************/
.editor-panel[data-type="background"] {
	img {
		max-width: 100%;
	}

	.panel-title {
		margin-bottom: 0;
	}

	.panel-body {
		padding: 0;
		overflow: hidden;
		border-radius: 0 0 5px 5px;
	}

	&.customize-open .customize {
		padding: 0 10px;
	}

	.panel-footer {
		bottom: -59px;
	}

	.current-selection {
		position: relative;
		height: 180px;
		background-size: cover;
		background-position: 50%;

		&[data-type="pattern"] {
			background-size: initial;
			background-repeat: repeat;
		}

		&[data-type="color"] .settings{
			display: none !important;
		}

		&[data-type] .settings {
			display: block;
		}

		.settings {
			display: none;
			text-align: center;
			position: relative;
			top: 59px;

			.panel-button {
				background-color: rgba(0, 0, 0, 0.6);
				border: 2px solid white;
				color: white;
				padding: 5px 11px 6px;

				&:hover {
					color: $hover-color;
					border-color: $hover-color;
				}
			}
		}
	}

	.filters {
		background-color: rgba(0, 0, 0, 0.4);
		padding: 12px;
		text-align: center;
		position: absolute;
		bottom: 0;
		right: 0;
		left: 0;
	}

	.filter {
		@include panel-button();

		color: #222;
		margin: 3px;
		float: none;

		&:hover {
			background-color: lighten( $panel-color, 10% );
		}

		&.selected {
			background-color: $panel-color;
		}

	}

	.current-selection img,
	.presets img {
		position: relative;
	}

	.customize .section:not(.back) {
		display: none;
	}

	.preset-wrapper[data-type="color"] ~ * .customize .background-color {
		display: block;
	}

	.preset-wrapper[data-type="gradients"] ~ * .customize .direction,
	.preset-wrapper[data-type="gradients"] ~ * .customize .gradient-color-2,
	.preset-wrapper[data-type="gradients"] ~ * .customize .gradient-color-1 {
		display: block;
	}

	.preset-wrapper[data-type="pattern"] ~ * .customize {
		.scroll-effects,
		.background-color {
			display: block;
		}
	}

	.preset-wrapper[data-type="image"] ~ * .customize {
		.overlay-color,
		.scroll-effects,
		.vertical-position,
		.size {
			display: block;
		}
	}

	.add-image-controls {
		padding: 0;
		background-color: $panel-color;
		color: #fff;

		&:hover {
			background-color: lighten( $panel-color, 15% );
		}

		a {
			text-decoration: none;
			position: relative;
			top: 17px;
			color: #fff;
			font-size: 15px;
		}
	}

	.presets {
		padding: 0 20px;

		ul > li {
			margin: 15px 0;
			height: 53px;
			border: 1px solid #bdbcbc;
			cursor: pointer;
		}

		[data-type="image"] {
			background-size: cover;
			background-position: 50%;
		}

		[data-type="pattern"] {
			background-color: #d6d6d6;
		}

		.title {
			margin-bottom: 17px;
			margin-left: 0;
			margin-right: 0;
		}

		.add-image-controls {
			display: none;
		}

		&[data-filter="image"] .add-image-controls {
			display: block;
		}

		h4 {
			font-weight: normal;
			margin: 13px 0 6px;
		}

		.background-color {
			text-align: left;
			padding: 0;
			padding-bottom: 7px;

			label {
				position: absolute;
				top: -6px;
				right: 0;
				margin-top: 0;

				&:before {
					top: 5px;
					left: -25px;
				}
			}

			h4 {
				font-size: 18px;
				margin-top: 20px;
			}
		}
	}

	.selection {
		position: relative;
	}

	.presets .selected {
		@include selected-preset();
	}

	.background-design .customize {
		display: none;

		.back {
			margin-bottom: 0;
			margin-bottom: 0;
			padding: 8px 0 14px;
		}

		.overlay-color {
			padding-top: 8px;
			padding-bottom: 8px;
		}
	}

	.panel-footer {
		.customize-design {
			display: none;
		}
	}
}
