// These styles are taken from the WordPress Base Styles package.
// https://github.com/WordPress/gutenberg/blob/trunk/packages/base-styles/
// There are some small changes to make it work properly with Dart Sass.

@use "sass:color";

// WordPress grays.
$black: #000;
$gray-900: #1e1e1e;
$gray-800: #2f2f2f;
$gray-700: #757575;
$gray-600: #949494;
$gray-400: #ccc;
$gray-300: #ddd;
$gray-200: #e0e0e0;
$gray-100: #f0f0f0;
$white: #fff;

// Grid System.
$grid-unit: 8px;
$grid-unit-05: 0.5 * $grid-unit;	// 4px
$grid-unit-10: 1 * $grid-unit;		// 8px
$grid-unit-15: 1.5 * $grid-unit;	// 12px
$grid-unit-20: 2 * $grid-unit;		// 16px
$grid-unit-30: 3 * $grid-unit;		// 24px
$grid-unit-40: 4 * $grid-unit;		// 32px
$grid-unit-50: 5 * $grid-unit;		// 40px
$grid-unit-60: 6 * $grid-unit;		// 48px
$grid-unit-70: 7 * $grid-unit;		// 56px
$grid-unit-80: 8 * $grid-unit;		// 64px

@mixin admin-scheme($color-primary) {
	// Define RGB equivalents for use in rgba function.
	// Hexadecimal css vars do not work in the rgba function.
	--wp-admin-theme-color: #{$color-primary};
	--wp-admin-theme-color--rgb: #{hex-to-rgb($color-primary)};
	// Darker shades.
	--wp-admin-theme-color-darker-10: #{color.adjust($color-primary, $lightness: -5%)};
	--wp-admin-theme-color-darker-10--rgb: #{hex-to-rgb(color.adjust($color-primary, $lightness: -5%))};
	--wp-admin-theme-color-darker-20: #{color.adjust($color-primary, $lightness: -10%)};
	--wp-admin-theme-color-darker-20--rgb: #{hex-to-rgb(color.adjust($color-primary, $lightness: -10%))};

	// Focus style width.
	// Avoid rounding issues by showing a whole 2px for 1x screens,
	// and 1.5px on high resolution screens.
	--wp-admin-border-width-focus: 2px;

	@media ( -webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
		--wp-admin-border-width-focus: 1.5px;
	}
}

@mixin wordpress-admin-schemes() {

	body.admin-color-light {

		@include admin-scheme(#0085ba);
	}

	body.admin-color-modern {

		@include admin-scheme(#3858e9);
	}

	body.admin-color-blue {

		@include admin-scheme(#096484);
	}

	body.admin-color-coffee {

		@include admin-scheme(#46403c);
	}

	body.admin-color-ectoplasm {

		@include admin-scheme(#523f6d);
	}

	body.admin-color-midnight {

		@include admin-scheme(#e14d43);
	}

	body.admin-color-ocean {

		@include admin-scheme(#627c83);
	}

	body.admin-color-sunrise {

		@include admin-scheme(#dd823b);
	}
}