.cd-header-banner-metabox {
	padding: 15px 0;
	max-width: 800px;
	margin: auto;

	.cd-header-banner-field {
		margin-bottom: 35px;

		input[type="text"],
		input[type="number"],
		input[type="url"],
		select {
			max-width: 350px;
			height: 35px;
			width: 100%;
		}

		textarea {
			width: 100%;
			height: 150px;
		}

		&-title {
			cursor: pointer;
			margin-bottom: 15px;
			padding-bottom: 15px;
			border-bottom: 1px solid #dedede;
			width: 100%;
			display: block;
			color: #333;
			font-weight: 600;
			font-size: 14px;
		}

		&-control {
			margin-bottom: 15px;
		}

		&-description {
			color: #393F46B2;
			font-weight: 400;
			font-style: italic;
			font-size: 13px;
		}
	}

	.cd-header-banner-section {
		margin-bottom: 35px;

		.cd-header-banner-field {
			&:last-child {
				margin-bottom: 0;
			}
		}

		&-title {
			color: #333;
			font-weight: 600;
			font-size: 18px;
			margin-bottom: 20px;
		}

		&-content {
			padding: 25px;
			background-color: #f9f9f9;
		}
	}

	// Range.
	.cd-header-banner-field {
		.cd-header-banner-control {
			.cd-header-banner-range-value {
				max-width: 70px;
			}
		}
	}

	// Switcher.
	.cd-header-banner-field {
		.cd-header-banner-control {
			.cd-header-banner-switcher {
				position: relative;
				display: inline-block;
				width: 45px;
				height: 25px;

				input {
					opacity: 0;
					width: 0;
					height: 0;

					&:checked + .cd-header-banner-switcher-slider {
						background-color: #2196F3;

						&:before {
							transform: translate(23px, 50%);
						}
					}

					&:focus + .cd-header-banner-switcher-slider {
						box-shadow: 0 0 1px #2196F3;
					}
				}

				&-slider {
					position: absolute;
					cursor: pointer;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					background-color: #ccc;
					-webkit-transition: .4s;
					transition: .4s;
					border-radius: 34px;

					&:before {
						position: absolute;
						content: "";
						height: 17px;
						width: 17px;
						left: 0;
						bottom: 50%;
						background-color: white;
						-webkit-transition: .4s;
						transition: .4s;
						border-radius: 50%;
						transform: translate(5px, 50%);
					}
				}
			}
		}
	}

	// Upload.
	.cd-header-banner-field {
		.cd-header-banner-control {
			.cd-header-banner-upload {
				display: flex;
				align-items: flex-end;
				gap: 15px;

				&-preview {
					display: none;
					width: 80px;
					height: 80px;
				}

				&-remove {
					display: none;
				}
			}
		}
	}
}