/**
 * Admin Color Scheme Overrides
 */

// All color schemes, body.admin-color ...
// -fresh (default, needs no overriding)
// -light (needs no overriding)
// -blue
// -coffee
// -ectoplasm
// -midnight
// -ocean
// -sunrise

// List of Gutenberg elements that need to be overridden
// - primary buttons (parent bleeds in)
// - switches
// - tab indicators

// List of spot colors (eyedropped from the primary button)
$scheme-fresh__spot-color: #0083b8;
$scheme-blue__spot-color: #e1a84b;
$scheme-coffee__spot-color: #c6a488;
$scheme-ectoplasm__spot-color: #a0b748;
$scheme-midnight__spot-color: #e34e46;
$scheme-ocean__spot-color: #9bb99f;
$scheme-sunrise__spot-color: #de823f;

// Color override mixin
@mixin admin-scheme-color-overrides( $scheme: fresh, $spot-color: $scheme-fresh__spot-color ) {
	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;
				border-color: $spot-color;
			}

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

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