@import "../css/_mixins.scss";
@import "../css/_theme-vars.scss";
@import "../css/_admin-colors.scss";


/* Theme Customizer styles */

#customize-header-actions .button {
	margin: 0;
	padding: 0 5px;
	font-size: 12px;
}
#customize-header-actions .customize-action-reset {
	float: right;
	margin-left: 6px;
	max-width: 50px;
}

#customize-header-actions .customize-action-refresh {
	position: absolute;
	z-index:1000;
	left: 60px;
	top: 10px;
}
#customize-header-actions .customize-action-refresh:before {
	margin: 0 0.3em 0 0;
	vertical-align: top;
}


#customize-controls .customize-info div.customize-panel-description,
#customize-controls .customize-info div.customize-section-description,
#customize-controls div.no-widget-areas-rendered-notice {
	display:block;
}
#customize-controls #customize-info div.customize-panel-description {
	display:none;
}
#customize-controls .customize-section-description-container {
	margin-bottom:0;
}
#customize-controls div.customize-section-description {
	color: #555d66;
	background: #fff;
	padding: 12px 15px;
	border-top: 1px solid #ddd;
}
#customize-controls .customize-section-title + .customize-section-description {
	margin: -1px -12px 0;
}
#customize-controls div.customize-panel-description,
#customize-controls div.customize-panel-description p,
#customize-controls div.customize-section-description,
#customize-controls div.customize-section-description p,
.customize-control-description {
	font-size: 12px;
	line-height: 18px;
}

.customize-control-description {
	margin-top: 3px;
	margin-bottom: 0;

	#customize-controls & {
		color: $text_color;
		@include font(12px, 17px, normal, normal);
	}
	#customize-controls .customize-control-info & {
		color: $text_color;
		font-size: 13px;
	}
}

.customize-control-info > div {
	margin-top:2em !important;
	padding: 0.8em 12px;
	background-color: #fcfcfc;
	color: #626467;
	border-top: 1px solid #ddd !important;
	border-bottom: 1px solid #ddd !important;
	border-left: 4px solid $customizer_accent_color;
	margin: 6px -12px;

	& > .customize-control-title {
		text-shadow: 1px 1px 1px #fff;
		font-size: 16px;
		font-weight: 400;
		margin-bottom:0;
	}
	& > .customize-control-description {
		p {
			margin: 0;
		}
	}
}
.customize-control-field-wrap {
	display: block;
	position:relative;
}

#customize-theme-controls li.customize-control > .customize-control-title,
#customize-theme-controls li.customize-control > label {
	display:block;
}
#customize-theme-controls li.customize-control > .customize-control-title,
#customize-theme-controls li.customize-control > label,
#customize-theme-controls li.customize-control > .customize-control-wrap {
	margin-top: 0.8em;
}
#customize-theme-controls li.customize-section-description-container + li.customize-control-sidebar_widgets {
	margin-top: 1em;
}

#customize-theme-controls li:not(.customize-section-description-container):not(.customize-control-info) + li.customize-control > .customize-control-content,
#customize-theme-controls li:not(.customize-section-description-container):not(.customize-control-info) + li.customize-control > .customize-control-title,
#customize-theme-controls li:not(.customize-section-description-container):not(.customize-control-info) + li.customize-control > label,
#customize-theme-controls li:not(.customize-section-description-container):not(.customize-control-info) + li.customize-control > .customize-control-wrap {
	padding-top:0.8em;
	border-top: 1px dotted #ddd;
}

.customize-control .customize-inside-control-row {
	padding-top: 3px;
	padding-bottom: 3px;
}

.customize-control > label > label,
.customize-control > div > label {
	display:inline-block;
	margin:0 1em 0 0;
	padding:0;
	border:none;
}
.customize-control > label > label > input[type="radio"],
.customize-control > div > label > input[type="radio"] {
	margin-right:0;
}

.customize-control-background img,
.customize-control-cropped_image img,
.customize-control-header img,
.customize-control-image img,
.customize-control-media img,
.customize-control-upload img {
	width: auto;
}

#customize-control-header_image .customize-control-description {
	display:none;
}


/* Checkbox and Checklist */
.customize-control {
	.tooth_fairy_options_item_checkbox input[type="checkbox"]:checked,
	.tooth_fairy_options_item_checklist input[type="checkbox"]:checked {
		border-color: $customizer_accent_color;
		background-color: $customizer_accent_color;
	}
}


/* Radio */
.customize-control-radio {
	padding: 0;

	.tooth_fairy_options_item_radio input:checked + .tooth_fairy_options_item_holder,
	.tooth_fairy_options input[type="radio"]:checked + .tooth_fairy_options_item_holder {
		background-color: $customizer_accent_color;
	}
	.tooth_fairy_options_item_radio input:checked + .tooth_fairy_options_item_holder:focus:before,
	.tooth_fairy_options input[type="radio"]:checked + .tooth_fairy_options_item_holder:focus:before {
		border-color: $customizer_accent_color;
	}
}


/* Select */
.customize-control-select select {
	font-size: 13px;
	margin-top: 3px;
}


/* Text */
.customize-control-text input {
	font-size: 13px;
	margin-top: 3px;
}


/* Textarea */
.customize-control-textarea textarea {
	font-size: 13px;
	padding: 12px;
}


/* Switch */
#customize-theme-controls .customize-control-switch > .customize-control-wrap {
	@include flex;
	@include flex-direction(row);
	@include flex-align-items(center);
	@include flex-justify-content(space-between);

	.customize-control-title {
		@include flex-grow(1);		
	}
	.customize-control-field-wrap {
		@include flex-grow(0);
		margin: 0 0 0 0.5em;
	}
	.tooth_fairy_options_item_switch .tooth_fairy_options_item_holder_back {
		background-color: $customizer_switch_back;
	}
	.tooth_fairy_options_item_switch .tooth_fairy_options_item_holder_handle {
		background-color: $customizer_switch_handle;
	}
	.tooth_fairy_options_item_switch .tooth_fairy_options_item_holder_handle:after {
		background-color: $customizer_switch_handle;
	}
	.tooth_fairy_options_item_switch input:checked + .tooth_fairy_options_item_holder .tooth_fairy_options_item_holder_handle {
		background-color: $customizer_accent_color;
	}
	.tooth_fairy_options_item_switch input:checked + .tooth_fairy_options_item_holder .tooth_fairy_options_item_holder_handle:after {
		background-color: $customizer_accent_color;
	}
}


/* Choice */
.customize-control-choice {
	.tooth_fairy_list_choice {
		padding-top: 5px;
	}
	.tooth_fairy_list_choice_item {
		margin-right: 10px;
	}
	.tooth_fairy_list_choice_item_icon {
		border-color: #d5d8dc;
		background-color: #fff;
	}
	.tooth_fairy_list_choice_item_title {
		color: #6e7379;
	}
	.tooth_fairy_list_choice_item.tooth_fairy_list_active  .tooth_fairy_list_choice_item_icon {
		border-color: $customizer_accent_color;
	}
	.tooth_fairy_list_choice_item.tooth_fairy_list_active .tooth_fairy_list_choice_item_title {
		color: $customizer_accent_color;
	}
}


/* Range slider */
.customize-control-range {
	.customize-control-field-wrap {
		margin-top: 1em;
	}
	div.ui-slider .ui-slider-handle {
		background: $customizer_accent_color;
	}
	div.ui-slider .ui-slider-range {
		background: $customizer_accent_color;
	}
}

/* List icons */
.customize-control {
	.tooth_fairy_list_icons_selector:focus {
		border-color: $customizer_accent_color;
		@include box-shadow(0 0 0 1px $customizer_accent_color);
	}
	.tooth_fairy_list_icons {
		left: 0 !important;	
	}
	.tooth_fairy_list_icons span {
		font-size: 14px;
		@include square(30px);
	}
	.tooth_fairy_list_icons input[type="text"].tooth_fairy_list_icons_search:focus {
		border-color: $customizer_accent_color;
	}
	.tooth_fairy_list_icons input[type="text"].tooth_fairy_list_icons_search {
		font-size: 14px;
		padding: 6px 8px;
	}
}


/* Media selector */
.customize-control .widget_field_type_image > input[type="text"],
.customize-control .widget_field_type_media > input[type="text"],
.customize-control .widget_field_type_audio > input[type="text"],
.customize-control .widget_field_type_video > input[type="text"] {
	width: 60%;
}
.customize-control .widget_field_type_image > a.trx_addons_media_selector,
.customize-control .widget_field_type_media > a.trx_addons_media_selector,
.customize-control .widget_field_type_audio > a.trx_addons_media_selector,
.customize-control .widget_field_type_video > a.trx_addons_media_selector {
	width: 39%;
}


/* Color scheme editor */
.customize-control-scheme_editor {
	.tooth_fairy_scheme_editor_type .tooth_fairy_scheme_editor_row_cell {
		padding:0;
	}
	.tooth_fairy_scheme_editor_type .tooth_fairy_scheme_editor_row_cell:first-child {
		width: 32%;
	}
	.tooth_fairy_scheme_editor_type .tooth_fairy_scheme_editor_row_cell_span {
		width: 68%;
	}

	.tooth_fairy_scheme_editor_colors .tooth_fairy_scheme_editor_header_cell {
		font-size: 12px;
	}
	.tooth_fairy_scheme_editor_colors .tooth_fairy_scheme_editor_row_cell,
	.tooth_fairy_scheme_editor_colors .tooth_fairy_scheme_editor_row_cell input {
		font-size: 11px;
		line-height:13px;
	}
	.tooth_fairy_scheme_editor_colors .tooth_fairy_scheme_editor_row_cell input {
		padding: 3px 2px;
	}
	.tooth_fairy_scheme_editor_colors .tooth_fairy_scheme_editor_header_cell,
	.tooth_fairy_scheme_editor_colors .tooth_fairy_scheme_editor_row_cell {
		width: 17%;
		padding: 0;
	}
	.tooth_fairy_scheme_editor_colors .tooth_fairy_scheme_editor_header_cell:first-child,
	.tooth_fairy_scheme_editor_colors .tooth_fairy_scheme_editor_row_cell:first-child {
		width: 15%;
		font-size: 11px;
	}
	/* Spectrum ColorPicker */
	div.sp-container {
		.sp-choose {
			background: $customizer_accent_color;
		}
		.sp-choose:hover {
			background: $customizer_accent_hover;
		}
	}
}
/* Core ColorPicker */
.cp-color-picker {
	z-index: 1000000;
}




/* Text editor */
.mce-floatpanel, .mce-tooltip {
	z-index: 9999999 !important;
}


/* Widgets parameters
 *
 * Uncomment first row in each selector if you want display ThemeREX Widgets as SOW - fixed to the right side of panel
 * If you remove '[id^="customize-control-widget_trx_addons_"]' part from first line - standard WP Widgets will be moved also
 *
 */
.customize-control-widget_form .widget-control-actions {
	margin: 1.5em 0;
}
.customize-control-widget_form.wide-widget-control .widget-inside {
   	position: fixed;
    left: 18%;
   	top: 0 !important;
    max-height: 100vh !important;
   	border: 1px solid #e5e5e5;
    overflow-y: scroll;
	-webkit-box-sizing: border-box;
    	-ms-box-sizing: border-box;
        	box-sizing: border-box;
}
.customize-control-widget_form.wide-widget-control .widget-inside .widget-content {
	max-width: 360px !important;
	min-width: 270px !important;
}
@media (max-width: 1667px) {
	.customize-control-widget_form.wide-widget-control .widget-inside {
    	left: 300px;
    }
	.customize-control-widget_form.wide-widget-control .widget-inside .widget-content {
		max-width: 300px !important;
	}
}
@media (max-width: 1279px) {
	.customize-control-widget_form.wide-widget-control .widget-inside {
	   	position: static !important;
    	left: 0 !important;
	   	top: 0 !important;
    	max-height: none !important;
	   	border: none;
    	overflow: visible;
	}
	.customize-control-widget_form.wide-widget-control .widget-inside .widget-content {
		max-width: none !important;
	}
}


/* WordPress Customizer decoration
---------------------------------------------- */
#customize-theme-controls {
	.accordion-section .accordion-section-title {
		&:before {
			font-family: $theme_icons;
			display: inline-block;
			vertical-align: middle;
			font-weight: 300;
			margin-right: 0.25em;
			@include transition-colors;

			/* Simple icon */
			font-size: 1.25em;
			color: $text_light;

			/* Round icon */
			//font-size: 1em;
			//@include square(2em);
			//@include border-round;
			//@include box-shadow(0 2px 1px rgba(46, 68, 83, 0.15));
			//background-color: $customizer_accent_color;
			//color: #fff;
			//border: 2px solid #fff;
		}
		&:hover:before {
			/* Simple icon */
			color: $customizer_accent_hover;

			/* Round icon */
			//background-color: $customizer_accent_hover;
		}
	}
	/* Theme-specific sections */
	#accordion-section-title_tagline .accordion-section-title:before {		content: '\e95e'; }
	#accordion-section-general .accordion-section-title:before {			content: '\e961'; }
	#accordion-section-header .accordion-section-title:before {				content: '\e967'; }
	#accordion-section-footer .accordion-section-title:before {				content: '\e966'; }
	#accordion-section-mobile .accordion-section-title:before {				content: '\e962'; }
	#accordion-panel-front_page .accordion-section-title:before {			content: '\e965'; }
	#accordion-panel-blog .accordion-section-title:before {					content: '\f511'; }
	#accordion-section-blog_general .accordion-section-title:before {		content: '\f508'; }
	#accordion-section-blog_general_category .accordion-section-title:before {	content: '\f503'; }
	#accordion-section-blog_general_tag .accordion-section-title:before {	content: '\f513'; }
	#accordion-section-blog_general_author .accordion-section-title:before {content: '\f509'; }
	#accordion-section-blog_general_search .accordion-section-title:before {content: '\f50a'; }
	#accordion-section-blog_single .accordion-section-title:before {		content: '\f512'; }
	#accordion-section-page_404_section .accordion-section-title:before {	content: '\e97b'; }
	#accordion-panel-woocommerce .accordion-section-title:before {			content: '\e96a'; }
	#accordion-panel-shop .accordion-section-title:before {					content: '\e96a'; }
	#accordion-section-shop_general .accordion-section-title:before {		content: '\e961'; }
	#accordion-section-shop_list .accordion-section-title:before {			content: '\f511'; }
	#accordion-section-shop_single .accordion-section-title:before {		content: '\f508'; }
	#accordion-section-shop_brand_section .accordion-section-title:before {	content: '\e8b9'; }
	#accordion-section-panel_colors .accordion-section-title:before {		content: '\e964'; }
	#accordion-panel-fonts .accordion-section-title:before {				content: '\e95d'; }
	#accordion-panel-cpt .accordion-section-title:before {					content: '\e960'; }
	#accordion-section-cars .accordion-section-title:before {				content: '\f502'; }
	#accordion-section-certificates .accordion-section-title:before {		content: '\f504'; }
	#accordion-section-courses .accordion-section-title:before {			content: '\f505'; }
	#accordion-section-dishes .accordion-section-title:before {				content: '\f506'; }
	#accordion-section-portfolio .accordion-section-title:before {			content: '\f507'; }
	#accordion-section-properties .accordion-section-title:before {			content: '\e971'; }
	#accordion-section-resume .accordion-section-title:before {				content: '\f509'; }
	#accordion-section-services .accordion-section-title:before {			content: '\f50b'; }
	#accordion-section-sport .accordion-section-title:before {				content: '\f50c'; }
	#accordion-section-team .accordion-section-title:before {				content: '\f50d'; }
	#accordion-section-testimonials .accordion-section-title:before {		content: '\f50e'; }
	#accordion-section-edd .accordion-section-title:before {				content: '\f515'; }
	#accordion-section-bbpress .accordion-section-title:before {			content: '\f501'; }
	#accordion-section-events .accordion-section-title:before {				content: '\e965'; }
	#accordion-panel-tribe_customizer .accordion-section-title:before {		content: '\e965'; }
	#accordion-section-give .accordion-section-title:before {				content: '\f510'; }
	#accordion-section-learnpress .accordion-section-title:before {			content: '\f505'; }
	#accordion-section-sportspress .accordion-section-title:before {		content: '\f50c'; }
	/* WordPress sections */
	#accordion-panel-nav_menus .accordion-section-title:before {			content: '\e93c'; }
	#accordion-panel-widgets .accordion-section-title:before {				content: '\e977'; }
	#accordion-section-static_front_page .accordion-section-title:before {	content: '\f510'; }
	#accordion-section-background_image .accordion-section-title:before {	content: '\e973'; }
	#accordion-section-custom_css .accordion-section-title:before {			content: '\f50f'; }
}


/* Decorate panel 'Typography'
-------------------------------------------- */
#customize-theme-controls .customize-pane-child[id^="sub-accordion-section-"][id$="_font_section"] {
	li:not(.customize-section-description-container):not(.customize-control-info) + li:not(.customize-control-info) > label,
	li:not(.customize-section-description-container):not(.customize-control-info) + li:not(.customize-control-info) > div {
		padding-top: 0;
		border: none;
	}
	.customize-control:not(.customize-control-info) {
		margin: 0;

		& + .customize-control:not(.customize-control-info) {
			margin-top: 0.5em;
		}
		.customize-control-title {
			display: inline-block;
			vertical-align: middle;
			width: 35%;
			margin-top: 0;
			line-height: 1.25em;

			& ~ [data-customize-setting-link] {
				display: inline-block;
				vertical-align: middle;
				width: 62%;
			}
		}
		.customize-control-description {
			margin-bottom: 1em;
		}
	}
	.customize-control-info {
		margin: 1em 0;

		.customize-control-wrap {
			margin: 0 !important;
			border: 1px solid #ddd;
		}
	}
}

body.tooth_fairy_decorate_fonts_section {
	#customize-controls .wp-full-overlay-sidebar-content {
		overflow-y: scroll;
	}
	.in-sub-panel.section-open #customize-theme-controls #sub-accordion-panel-fonts.customize-pane-child.current-panel {
		visibility: visible;
		height: auto;
		transform: none;
	}
	.in-sub-panel #customize-theme-controls .customize-pane-child[id^="sub-accordion-section-"][id$="_font_section"] {
		@include abs-lt(3%, 0);
		background-color: #fff;
		width: 94%;
		border: 2px solid #7ec3e5;
		padding-top: 1px;
		@include box-shadow(0 5px 10px 0 rgba(0,0,0,.125));
		@include border-radius(2px);
		@include translateX(-110%);

		&:after {
			content: ' ';
			display: block;
			@include square(8px);
			border: 2px solid #7ec3e5;
			border-top-color: transparent;
			border-right-color: transparent;
			background-color: #fff;
			@include abs-lt(15px, -6px);
			@include rotate(135deg);
		}
		&.open {
			@include transform-none;
			overflow: visible;
		}
		.customize-section-description-container {
			display: none;
		}
	}
}
