/**
 * Admin Color Scheme Overrides
 */

// List of spot colors
// - Spot color 1 is used for most decorative elements, eyedropped from the profile color swatches
// - Spot color 2 is use for notifications and switches, this color as such can be overlaid on spot color 1, eye dropped from the Primary button
// - Spot color 2 is not often used in Gutenberg, but can be used when spot color 1 is not a good choice for the element to be recolored, like the red switch in Midnight

// -fresh (default, needs no overriding)
$scheme-fresh__spot-color: $blue-medium-500;
$scheme-fresh__spot-color-2: $blue-wordpress;

// .admin-color-light
$scheme-light__spot-color: $blue-medium-500;
$scheme-light__spot-color-2: #c75726;

// .admin-color-blue
$scheme-blue__spot-color: #82b4cb;
$scheme-blue__spot-color-2: #d9ab59;

// .admin-color-coffee
$scheme-coffee__spot-color: #c2a68c;
$scheme-coffee__spot-color-2: #9fa47b;

// .admin-color-ectoplasm
$scheme-ectoplasm__spot-color: #a7b656;
$scheme-ectoplasm__spot-color-2: #c77430;

// .admin-color-midnight
$scheme-midnight__spot-color: #e34e46;
$scheme-midnight__spot-color-2: #77a6b9;

// .admin-color-ocean
$scheme-ocean__spot-color: #a3b9a2;
$scheme-ocean__spot-color-2: #a89d8a;

// .admin-color-sunrise
$scheme-sunrise__spot-color: #d1864a;
$scheme-sunrise__spot-color-2: #c8b03c;


// Apply those colors to these Gutenberg elements
// - primary buttons (spot color)
// - tab indicators (spot color)
// - switches (spot color 2)



// Color override mixin
@mixin admin-scheme-color-overrides( $scheme: fresh, $spot-color: $scheme-fresh__spot-color, $spot-color-2: $scheme-fresh__spot-color-2 ) {
	body.admin-color-#{ ( $scheme ) } {
		// Tab indicators
		.edit-post-sidebar__panel-tab.is-active,
		.editor-inserter__tab.is-active {
			border-bottom: 3px solid $spot-color;
		}

		// Switch
		.components-form-toggle.is-checked {
			.components-form-toggle__track {
				background-color: $spot-color-2;
				border-color: $spot-color-2;
			}

			&:before {
				background-color: $spot-color-2;
			}
		}

		// Saving state indicators
		.editor-post-publish-button.is-saving,
		.editor-post-publish-button.is-saving:disabled {
			// Yes, these need to be !important because they !important upstream too ¯\_(ツ)_/¯
			border-color: darken( $spot-color, 10 ) darken( $spot-color, 20 ) darken( $spot-color, 20 ) !important;
			box-shadow: 0 1px 0 darken( $spot-color, 20 ) !important;
			text-shadow: 0 -1px 1px darken( $spot-color, 20 ), 1px 0 1px darken( $spot-color, 20 ), 0 1px 1px darken( $spot-color, 20 ), -1px 0 1px darken( $spot-color, 20 ) !important;

			&:before {
				background-image: repeating-linear-gradient( -45deg, darken( $spot-color, 20 ), darken( $spot-color, 20 ) 11px, darken( $spot-color, 10 ) 10px, darken( $spot-color, 10 ) 20px );
			}
		}

		// Datepicker
		.react-datepicker__day--selected {
			background-color: $spot-color;
		}

		// URL suggestions
		.blocks-url-input__suggestion:focus,
		.blocks-url-input__suggestion.is-selected {
			background: darken( $spot-color, 15 );
		}
	}
}
