@use 'sass:color';
@use 'sass:map';
@use './colors';

// box-shadow
$box-shadow: (
	sm:
		'0 1px 2px 0 color-mix(in srgb, var(--color-shadow), transparent 95%)',
	shadow:
		'0 1px 3px 0 color-mix(in srgb, var(--color-shadow), transparent 90%), 0 1px 2px -1px color-mix(in srgb, var(--color-shadow), transparent 90%)',
	md:
		'0 4px 6px -1px color-mix(in srgb, var(--color-shadow), transparent 90%), 0 2px 4px -2px color-mix(in srgb, var(--color-shadow), transparent 90%)',
	lg:
		'0 10px 15px -3px color-mix(in srgb, var(--color-shadow), transparent 90%), 0 4px 6px -4px color-mix(in srgb, var(--color-shadow), transparent 90%)',
	xl:
		'0 20px 25px -5px color-mix(in srgb, var(--color-shadow), transparent 90%), 0 8px 10px -6px color-mix(in srgb, var(--color-shadow), transparent 90%)',
	2xl:
		'0 25px 50px -12px color-mix(in srgb, var(--color-shadow), transparent 75%)',
	inner:
		'inset 0 2px 4px 0 color-mix(in srgb, var(--color-shadow), transparent 95%)',
	none: '0 0 #0000',
) !default;

// box-shadow without css vars
$color-shadow-hue: color-hue(colors.$color-shadow);
$color-shadow-saturation: color-saturation(colors.$color-shadow);
$color-shadow-lightness: color-lightness(colors.$color-shadow);

// opacity
$opacity: (
	0: 0,
	5: 0.05,
	10: 0.1,
	15: 0.15,
	20: 0.2,
	25: 0.25,
	30: 0.3,
	35: 0.35,
	40: 0.4,
	45: 0.45,
	50: 0.5,
	55: 0.55,
	60: 0.6,
	65: 0.65,
	70: 0.7,
	75: 0.75,
	80: 0.8,
	85: 0.85,
	90: 0.9,
	95: 0.95,
	100: 1,
) !default;

// mix blend-mode
$mix-blend-mode: (
	normal,
	multiply,
	screen,
	overlay,
	darken,
	lighten,
	color-dodge,
	color-burn,
	hard-light,
	soft-light,
	difference,
	exclusion,
	hue,
	saturation,
	color,
	luminosity,
	plus-lighter
) !default;

// background blend-mode
$background-blend-mode: (
	normal,
	multiply,
	screen,
	overlay,
	darken,
	lighten,
	color-dodge,
	color-burn,
	hard-light,
	soft-light,
	difference,
	exclusion,
	hue,
	saturation,
	color,
	luminosity
) !default;