$light: #ffffff;
$accent: #8666f7;

$background: #2b2c3a;
$background_light: lighten($background, 4%);

$border: lighten($background, 10%);

.ct-disable-transitions {
	* {
		transition: none !important;
	}
}

.ct-dark-mode {
	#customize-controls {
		background: $background;
		border-right-color: $border;

		#customize-header-actions {
			background: $background_light;
			border-bottom-color: $border;

			.customize-controls-close {
				color: $light;
				background: transparent;
				border-right-color: $border;
			}

			.ct-revert {
				color: $light;
				background: transparent;
				border-right-color: $border;
			}
		}

		#customize-save-button-wrapper {
			.button-primary {
				background: $accent;
				border-color: darken($accent, 3%);
				text-shadow: none;

				&:hover,
				&:focus {
					background: darken($accent, 2%);
					border-color: darken($accent, 4%);
				}

				&:disabled {
					// opacity: 0.8;
					color: lighten($accent, 15%) !important;
					background: darken($accent, 5%) !important;
					border-color: darken($accent, 7%) !important;
				}

				&:focus {
					box-shadow: 0 1px 0 darken($accent, 7%);
				}
			}
		}

		#customize-info {
			border-bottom-color: $border;

			.accordion-section-title {
				color: lighten($background, 40%);
				background: $background_light;
			}

			&.open {
				.customize-help-toggle {
					color: $accent;
				}
			}

			.customize-help-toggle:hover {
				color: $accent;
			}
		}

		.panel-meta.customize-info {
			border-bottom-color: $border;

			.accordion-section-title {
				color: lighten($background, 40%);
				background: $background_light;

				&:hover {
					color: lighten($background, 40%);
					background: $background_light;
				}
			}
		}

		.customize-section-title {
			background: $background_light;
			border-bottom-color: $border;

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

		.customize-panel-description {
			color: lighten($background, 40%);
			border-top-color: $border;
			background: $background_light;
		}

		.customize-panel-back,
		.customize-section-back {
			color: $light;
			background: $background_light;
			border-right-color: $border;
			border-left-color: $border;

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

		.control-section {
			> h3 {
				color: lighten($background, 60%);

				&:hover {
					color: $accent;
					background-color: $background_light;

					&:after {
						color: inherit;
					}
				}

				&:focus {
					color: $accent;
					background: $background_light !important;

					&:after {
						color: inherit;
					}
				}
			}
		}

		#customize-footer-actions {
			background: $background_light;
			border-top-color: $border;

			.collapse-sidebar-arrow {
				color: $background_light;
			}

			.devices {
				background: inherit;
				box-shadow: -20px 0 10px -5px $background_light;

				&:before {
					position: absolute;
					content: '';
					top: 0;
					left: -5px;
					width: 1px;
					height: 100%;
					background: $border;
				}

				button {
					&:not(.active) {
						&:before {
							color: $light;
						}
					}

					&.active {
						&:before {
							color: $accent;
						}

						border-bottom-color: $accent;
					}

					&:focus,
					&:hover {
						background: transparent;
					}
				}
			}
		}

		// options
		#customize-theme-controls {
			.control-section.open {
				border-bottom-color: $border;
			}

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

				h3 {
					color: $accent;
				}
			}

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

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

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

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

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

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

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

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

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

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

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

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

			// input
			input[type='text'],
			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%);
					}
				}
			}

			// 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 1px lighten($background, 10%);

					&:after {
						display: none;
						background: lighten($border, 50%);
					}
				}
			}

			// 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, 3%);
				}

				&: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;
				}
			}

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

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

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

				input {
					border-color: $border;
				}

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

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

			// color picker
			.ct-color-picker-modal {
			}

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

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

	// site area
	&.wp-full-overlay {
		background: $background_light !important;
	}
}