.ct-dark-mode #customize-controls {

	// input
	input[type='text'],
	input[type='number'],
	input[type='search'],
	textarea {
		&:not(.wp-color-picker) {
			color: $light;
			border-color: $border;
			background: $background_light;

			&:focus {
				border-color: lighten($border, 10%);
				box-shadow: none;
				// box-shadow: 0 0 2px lighten($border, 10%);
			}
		}
	}

	// checkbox & radiobox
	input[type=checkbox],
	input[type=radio] {
		border-color: lighten($border, 3%);
		background: $background_light;
	}

	input[type=checkbox]:before {
		color: $accent;
	}

	input[type=radio]:before {
		background-color: $accent;
	}


	// ct-title
	.ct-title {
		h3 {
			color: $light;
		}

		p {
			color: lighten($background, 60%);
		}

		&:not(:first-child) {
			border-top-color: $border;
		}
	}

	// group title
	.ct-group-title {
		border-top-color: $border;

		h3 {
			// color: $accent;
			color: lighten($accent, 7%);
		}
	}

	// group divider
	.ct-group-divider h3 {
		background: $border;
	}

	// revert button
	.ct-control .ct-revert {
		color: $light;
	}

	// divider
	.ct-divider:before {
		background: $border;
	}

	.ct-control > header label {
		color: lighten($background, 65%);
	}

	// switch
	.ct-option-switch {
		&:not(.ct-active) {
			border-color: lighten($border, 4%);

			> span {
				background: lighten($border, 15%);
			}

			&:after {
				border-color: lighten($border, 15%);
			}
		}

		&.ct-active {
			background: $accent;
			border-color: $accent;
		}
	}
	
	.ct-control:hover {
		.ct-option-switch:not(.ct-active) {
			border-color: lighten($border, 12%);

			> span {
				background: lighten($border, 25%);
			}
		}
	}

	// slider
	.ct-option-slider {
		.ct-slider {
			span,
			div {
				background: $accent;
			}

			span:hover {
				box-shadow: 0px 0px 0px 2px $accent;
			}

			&:before {
				background: $border;
			}
		}
	}

	// image picker
	.ct-image-picker[data-type='background'] {
		li {
			&.active {
				background: $accent;
			}

			&:not(.active):not(:hover) {
				background: rgba(221, 224, 226, 0.7);
			}
		}
	}

	// panel
	.ct-panel.ct-click-allowed {
		&:hover:before {
			background: $background_light;
		}

		.ct-customizer-panel-option button {
			color: lighten($background, 60%);
		}
	}

	.customize-panel-actions {
		background: $background_light;
		border-top-color: $border;
		border-bottom-color: $border;

		h3 {
			color: lighten($background, 40%);
		}
	}

	.ct-customizer-panel {
		background: $background;
		border-bottom-color: $border;
		border-top-color: $border;
	}

	// tabs
	.ct-tabs {
		> ul > li {
			color: lighten($background, 60%);
			border-color: lighten($border, 5%);

			&:after {
				background: $background;
			}
		}

		.ct-current-tab {
			border-top-color: lighten($border, 5%);
		}
	}

	// color picker
	.ct-color-picker-single {
		> span > span {
			box-shadow: 0 0 0 3px lighten($background, 10%);

			&:after {
				display: none;
			}
		}
	}

	// responsive controls
	.ct-responsive-controls li {
		color: lighten($background, 60%);

		&.active {
			color: $accent;
		}
	}

	// number
	.ct-option-number > a {
		color: lighten($background, 60%);
		border-color: lighten($background_light, 5%);
		background: lighten($background_light, 5%);

		&:not(.ct-disabled):hover {
			color: #fff;
			background: $accent;
			border-color: $accent;
		}
	}

	// buttons group
	.ct-buttons-group li {
		color: lighten($background, 60%);
		background: $background_light;
		box-shadow: inset 0px 0px 0px 1px $border;

		&.active {
			color: $light;
			background: $accent;
			box-shadow: inset 0px 0px 0px 1px darken($accent, 5%);
		}

		&:not(.active) {
			&:hover {
				color: $light;
				background: lighten($background_light, 4%);
			}
		}
	}

	// option description
	.ct-option-description {
		color: lighten($background, 50%);
	}

	// select
	.ct-select-input {
		input {
			color: $light;
			border-color: $border;
			background: $background_light;
		}

		&:before {
			background: $background_light;
		}

		&:after {
			color: $light;
		}
	}

	.ct-select-dropdown {
		border-color: $border;
		background: $background_light;

		> div {
			color: lighten($background, 60%);
			border-bottom-color: $border;

			&.active,
			&.selected {
				color: $light;
				background: lighten($background_light, 4%);
			}
		}
	}

	// layers
	.ct-layer {
		background: darken($background_light, 1.5%);
	}

	.ct-layer-controls {
		color: lighten($background, 60%);
		border-color: $border;
		background: lighten($background_light, 1%);

		> * {
			color: lighten($background, 60%);
			border-color: $border;
		}

		.ct-visibility:before {
			background: lighten($background, 60%);
			box-shadow: 0px 0px 0px 1px lighten($background_light, 1%);
		}
	}

	.ct-layer-content {
		border-color: $border;

		> * {
			border-color: $border;
		}
	}

	// value changer
	.ct-value-changer {
		background: $border;

		input {
			border-color: $border;
		}

		.ct-current-value {
			color: $light;
		}

		&:not(.no-unit-list) {
			&:hover {
				.ct-current-value {
					color: $accent;
				}
			}
		}
	}

	// notification
	.ct-disabled-notification {
		color: lighten($background, 50%);
		background: $background_light;
		border-left-color: $accent;
	}

	// attachment
	.ct-attachment .thumbnail {
		border-color: $border; 
	}

	// tooltip
	[class*="ct-tooltip"] {
		background: $accent;
	}

	.ct-tooltip-top:after {
		border-top: 5px solid $accent;
	}

	// checkbox & radio
	.ct-radio-option,
	.ct-option-checkbox {
		color: lighten($background, 60%);

		input {
			border-color: lighten($border, 4%);

			&:checked {
				border-color: $accent;
				background: $accent;
			}
		}

		label {
			&:hover input {
				&:not(:checked) {
					border-color:lighten($border, 10%);
				}
			}
		}
	}
}