@use 'sass:color';
@use 'sass:map';
@use 'sass:math';

@use '../common/var.scss' as common;
@use '../mixins/mixins.scss' as *;
@use '../color/index.scss' as *;

$colors: () !default;
@each $type in common.$types {
	$colors: map.deep-merge(
		(
			$type: (
				'base': map.get(common.$colors, $type, 'base'),
			),
		),
		$colors
	) !global;
}

// https://sass-lang.com/documentation/values/maps#immutability
// mix colors with white/black to generate light/dark level
@mixin set-color-mix-level($type, $number, $mode: 'light', $mix-color: $color-white) {
	// hex mix color
	$colors: map.deep-merge(
		(
			$type: (
				'#{$mode}-#{$number}': color.mix($mix-color, map.get($colors, $type, 'base'), math.percentage(math.div($number, 10))),
			),
		),
		$colors
	) !global;

	// for designer to view transparent
	// $colors: map.deep-merge(
	//   (
	//     $type: (
	//       '#{$mode}-#{$number}':
	//         rgba(map.get($colors, $type, 'base'), math.div(10 - $number, 10)),
	//     ),
	//   ),
	//   $colors
	// ) !global;
}

// Background
$bg-color: () !default;
$bg-color: map.merge(
	(
		'page': #0a0a0a,
		'': #141414,
		'overlay': #1d1e1f,
	),
	$bg-color
);

// Dark-mode
@each $type in common.$types {
	@for $i from 1 through 9 {
		@include set-color-mix-level($type, $i, 'light', map.get($bg-color, ''));
	}
}
@each $type in common.$types {
	@include set-color-mix-level($type, 2, 'dark', common.$color-white);
}

// Border
$border-color-base: #f5f8ff;
$border-color: () !default;
$border-color: map.merge(
	(
		'darker': rgba($border-color-base, 0.35),
		'dark': rgba($border-color-base, 0.3),
		'': rgba($border-color-base, 0.25),
		'light': rgba($border-color-base, 0.2),
		'lighter': rgba($border-color-base, 0.15),
		'extra-light': rgba($border-color-base, 0.1),
	),
	$border-color
);

// Mix to hex to avoid overlay issues
@each $key, $val in $border-color {
	$border-color: map.merge(
		$border-color,
		(
			$key: mix-overlay-color($val, map.get($bg-color, '')),
		)
	) !global;
}

// Box-shadow
$box-shadow: () !default;
$box-shadow: map.merge(
	(
		'': (
			0 12px 32px 4px rgb(0 0 0 / 36%),
			0 8px 20px rgb(0 0 0 / 72%),
		),
		'light': (
			0 0 12px rgb(0 0 0 / 72%),
		),
		'lighter': (
			0 0 6px rgb(0 0 0 / 72%),
		),
		'dark': (
			0 16px 48px 16px rgb(0 0 0 / 72%),
			0 12px 32px #000,
			0 8px 16px -8px #000,
		),
	),
	$box-shadow
);

// Fill
$fill-color-base: #fafcff;
$fill-color: () !default;
$fill-color: map.merge(
	(
		'darker': rgba($fill-color-base, 0.2),
		'dark': rgba($fill-color-base, 0.16),
		'': rgba($fill-color-base, 0.12),
		'light': rgba($fill-color-base, 0.08),
		'lighter': rgba($fill-color-base, 0.04),
		'extra-light': rgba($fill-color-base, 0.02),
		'blank': transparent,
	),
	$fill-color
);

// Mix to hex to avoid overlay issues
@each $key, $val in $fill-color {
	@if $key != 'blank' {
		$fill-color: map.merge(
			$fill-color,
			(
				$key: mix-overlay-color($val, map.get($bg-color, '')),
			)
		) !global;
	}
}

// Text
$text-color-base: #f0f5ff;
$text-color: () !default;
$text-color: map.merge(
	(
		'primary': rgba($text-color-base, 0.95),
		'regular': rgba($text-color-base, 0.85),
		'secondary': rgba($text-color-base, 0.65),
		'placeholder': rgba($text-color-base, 0.55),
		'disabled': rgba($text-color-base, 0.4),
	),
	$text-color
);

// Mix to hex to avoid overlay issues
@each $key, $val in $text-color {
	$text-color: map.merge(
		$text-color,
		(
			$key: mix-overlay-color($val, map.get($bg-color, '')),
		)
	) !global;
}

// Mask
$mask-color: () !default;
$mask-color: map.merge(
	(
		'': rgb(0 0 0 / 80%),
		'extra-light': rgb(0 0 0 / 30%),
	),
	$mask-color
);

// Button
// css3 var in packages/theme-chalk/src/button.scss
$button: () !default;
$button: map.merge(
	(
		'disabled-text-color': rgb(255 255 255 / 50%),
	),
	$button
);

// Card
// css3 var in packages/theme-chalk/src/card.scss
$card: () !default;
$card: map.merge(
	(
		'bg-color': getCssVar('bg-color', 'overlay'),
	),
	$card
);

// Empty
// css3 var in packages/theme-chalk/src/empty.scss
$empty: () !default;
$empty: map.merge(
	(
		'fill-color-0': getCssVar('color-black'),
		'fill-color-1': #4b4b52,
		'fill-color-2': #36383d,
		'fill-color-3': #1e1e20,
		'fill-color-4': #262629,
		'fill-color-5': #202124,
		'fill-color-6': #212224,
		'fill-color-7': #1b1c1f,
		'fill-color-8': #1c1d1f,
		'fill-color-9': #18181a,
	),
	$empty
);

// Scroll shadow
// css3 var in packages/theme-chalk/src/scroll-shadow.scss
$scroll-shadow: () !default;
$scroll-shadow: map.merge(
	(
		'': rgb(255 255 255 / 12%),
		'light': rgb(255 255 255 / 8%),
		'dark': rgb(255 255 255 / 16%),
	),
	$scroll-shadow
);