/*************** 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;
	}

	.section .slider ~ .value {
		top: -4px;
	}

	.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="gradients"] .settings{
			display: flex;
			justify-content: center;
		}

		&[data-type="hover-image"] .settings {
			display: flex;
			justify-content: center;
		}

		&[data-type="image"] .settings {
			display: flex;
			justify-content: center;
		}

		.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;
		display: flex;
		justify-content: center;
	}

	.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;
		padding: 18px 15px;
	}

	.customize .section.generic-border-color {
		display: block;
	}

	.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;
		}
	}

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

	.add-image-controls:not( .is-primary ) {
		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;
		}

		.add-hover-image-controls,
		.hover-background-color,
		.hover-background-image,
		.mobile-only-visibility {
			display: none;
		}

		&[data-filter="hover"] {
			.add-hover-image-controls,
			.hover-background-color,
			.hover-background-image,
			.mobile-only-visibility {
				display: block;
			}
			.title {
				display: none;
			}
		}

		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;
			padding: 8px 0 14px;
		}

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

	.add-hover-image-controls {
			margin: 15px 0;
			height: 53px;
			border: 1px solid #bdbcbc;
			cursor: pointer;
			padding: 0;
			background-color: #32373c;
			a {
				text-decoration: none;
				position: relative;
				top: 17px;
				color: #fff;
				font-size: 15px;
			}
	}

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

.editor-panel[data-type="background"] {
	.background-design.non-legacy {
		margin-left: 60px;
		padding: 10px;
		.background-panel-section {
			display: none;
			&.active {
				display: block;
			}
		}
	}
	.background-nav {
		display: block;
		.background-nav-item {
			width: 60px;
			span.dashicons {
				color: white;
				font-size:30px;
				text-align: center;
				width: 60px;
				height: 40px;
				padding-top: 10px;
			}
		}
	}
}