/*--------------------------------------------------------------------------------------------
*
*  Dark mode
*  
*  WordPress plugin: https://en-au.wordpress.org/plugins/dark-mode/
*  Github Documentation: https://github.com/danieltj27/Dark-Mode/wiki/Help:-Plugin-Compatibility-Guide
*
*--------------------------------------------------------------------------------------------*/

// Dark Mode Colours.
$white:           #ffffff;
$black:           #000000;
$blue:            #0073aa;
$medium-blue:     #00a0d2;
$clear:           transparent;

$accent-red:      #dc3232;
$accent-orange:   #f56e28;
$accent-yellow:   #ffb900;
$accent-green:    #46b450;
$accent-blue:     $blue;
$accent-purple:   #826eb4;

$base-grey:       #23282d;
$light-grey:      #bbc8d4;
$heavy-grey:      #37444c;
$dark-grey:       #32373c;
$ultra-grey:      #191f25;
$dark-silver:     #50626f;
$base-blue:       #2e74aa;
$light-blue:      #4092d2;
$dark-blue:       #2c5f88;
$ultra-blue:      #1f3f58;
$bright-blue:     #30ceff;

$editor-lavender: #c678dd;
$editor-sunglo:   #e06c75;
$editor-olivine:  #98c379;

// Custom variables.
$body_text: 			#bbc8d4;
$body_background: 		#23282d;
$body_background2: 		#191f25;
$postbox_background: 	#32373c;
$postbox_border: 		#191f25;
$postbox_divider: 		#23282d;
$input_background: 		#50626f;
$input_text: 			#fff;
$input_border: 			#191f25;

// Mixins.
@mixin dark-text() {
	color: $body_text;
}
@mixin dark-heading() {
	color: $body_text;
}
@mixin dark-border() {
	border-color: $postbox_border;
}
@mixin dark-background() {
	background: $body_background;
}
@mixin darker-background() {
	background: darken($body_background, 5%);
}
@mixin dark-postbox() {
	background-color: $postbox_background;
	border-color: $postbox_border;
	color: $body_text;
}
@mixin dark-postbox-block() {
	background-color: #2d3136;
	border-color: $postbox_divider;
}
@mixin dark-divider() {
	border-color: $postbox_divider;
}
@mixin dark-input() {
	background-color: $input_background;
	border-color: $input_border;
	color: $input_text;
}


/*---------------------------------------------------------------------------------------------
*
*  Global
*
*---------------------------------------------------------------------------------------------*/

// acf-box
.acf-box {
	@include dark-postbox();
			
	.title,
	.footer {
		@include dark-divider();
	}
	
	h2 {
		@include dark-heading();
	}
	
	table, tbody, tr {
		background: transparent !important;
	}
}

// thead
.acf-thead {
	@include dark-heading();
	@include dark-border();
}
.acf-tfoot {
	@include dark-postbox-block();
}

// table clear
.acf-table.-clear,
.acf-table.-clear tr {
	background: transparent !important;
}

// loading overlay
.acf-loading-overlay {
	background: rgba(0,0,0,0.5);
}


/*---------------------------------------------------------------------------------------------
*
*  Fields
*
*---------------------------------------------------------------------------------------------*/

// fields
.acf-fields {
	
	// field
	> .acf-field {
		@include dark-divider();
	}
}

// fields (left)
.acf-fields.-left {
	
	> .acf-field {
		&:before {
			background: rgba(0,0,0,0.1);
			@include dark-divider();
		}
	}
}

// fields (border)
.acf-fields.-border {
	@include dark-postbox();
}

// width
.acf-field[data-width] + .acf-field[data-width] {
	@include dark-divider();
}

// text
.acf-input-prepend, 
.acf-input-append {
	@include dark-postbox();
}

// tab
.acf-tab-wrap {
	
}

.acf-fields > .acf-tab-wrap {
	@include dark-postbox();
	
	.acf-tab-group {
		@include dark-postbox-block();
		
		li {
			a {
				@include dark-postbox-block();
				
				&:hover {
					@include dark-postbox-block();
					@include dark-text();
				}
			}
			
			&.active a {
				@include dark-postbox();
			}
		}
	}
}

.acf-fields.-sidebar {
	&:before {
		@include dark-postbox-block();
	}
}

.acf-fields.-sidebar.-left {
	&:before {
		@include dark-postbox-block();
		background: $body_background;
	}
	> .acf-tab-wrap.-left {
		.acf-tab-group li a {
			@include dark-postbox-block();
		}
		
		.acf-tab-group li.active a {
			@include dark-postbox-block();
		}
	}
}

// file
.acf-file-uploader {
	
	.show-if-value {
		@include dark-postbox();
		
		.file-icon {
			@include dark-postbox-block();
		}
	}
}

// acf-oembed
.acf-oembed {
	@include dark-postbox-block();
	
	.title {
		@include dark-input();
	}
}

// gallery
.acf-gallery {
	@include dark-postbox-block();
	
	.acf-gallery-main {
		@include dark-background();
	}
	
	.acf-gallery-attachment {
		.margin {
			@include dark-postbox-block();
		}
	}	
		
	.acf-gallery-side {
		@include dark-postbox-block();
		
		.acf-gallery-side-info {
			@include dark-postbox-block();
		}
	}
	
	.acf-gallery-toolbar {
		@include dark-postbox-block();
	}
}

// button group
.acf-button-group {
	
	label:not(.selected) {
		@include dark-postbox-block();
	}
}

// switch
.acf-switch:not(.-on) {
	@include dark-postbox-block();
	.acf-switch-slider {
		@include dark-input();
	}
}

// link
.acf-link .link-wrap {
	@include dark-postbox-block();
}

// relationship
.acf-relationship {
	.filters {
		@include dark-postbox();
	}
	.selection {
		@include dark-postbox-block();
		.choices,
		.choices-list,
		.values {
			@include dark-postbox-block();	
		}
	}
}

// checkbox
.acf-taxonomy-field .categorychecklist-holder {
	@include dark-postbox-block();
}

// google map
.acf-google-map {
	@include dark-postbox-block();
	
	.title {
		@include dark-input();
	}
}

// accordion
.acf-accordion {
	@include dark-postbox();
}
.acf-field.acf-accordion .acf-accordion-content > .acf-fields {
	@include dark-border();
}

// flexible content
.acf-flexible-content {
	.layout {
		@include dark-postbox();
		
		.acf-fc-layout-handle {
			@include dark-postbox-block();
			
			.acf-fc-layout-order {
				@include dark-postbox();
			}
		}
	}
}

// repeater
#wpbody .acf-table {
	@include dark-postbox-block();
	
	> tbody,
	> thead {
		> tr {
			background: transparent;
			
			> td,
			> th {
				@include dark-border();
			}
		}
	}
}

// Select
.acf-field select {
	optgroup, optgroup:nth-child(2n) {
		background: $input_background;
	}
}

/*---------------------------------------------------------------------------------------------
*
*  Field Group
*
*---------------------------------------------------------------------------------------------*/

// fields
#acf-field-group-fields {
	
	// field list
	.acf-field-list-wrap {
		@include dark-postbox();
	}
	
	.acf-field-list {
		.no-fields-message {
			@include dark-postbox();
		}
	}
	
	// field
	.acf-field-object {
		@include dark-postbox();
		@include dark-divider();
		
		
		table, tbody, tr, td, th {
			background: transparent;
			@include dark-divider();
		}
		
		.acf-field {
			.acf-label {
				@include dark-postbox-block();
			}
		}
		
		// sortable
		&.ui-sortable-helper {
			@include dark-border();
			box-shadow: none;
		}
		
		&.ui-sortable-placeholder {
			@include dark-postbox-block();
			box-shadow: none;
		}
	}
	
	.acf-field-object + .acf-field-object-tab::before,
	.acf-field-object + .acf-field-object-accordion::before {
		@include dark-postbox-block();
	}
}


/*---------------------------------------------------------------------------------------------
*
*  Admin: Tools
*
*---------------------------------------------------------------------------------------------*/

// tools
.acf-meta-box-wrap {
	
	.acf-fields {
		@include dark-input();
		background: transparent;
	}
}