import { ThemeShadows } from "styled-system";
import CSS from "csstype";

declare module "styled-system" {
export interface ThemeShadows {
xs: CSS.Property.BoxShadow | CSS.Property.TextShadow;
sm: CSS.Property.BoxShadow | CSS.Property.TextShadow;
base: CSS.Property.BoxShadow | CSS.Property.TextShadow;
md: CSS.Property.BoxShadow | CSS.Property.TextShadow;
lg: CSS.Property.BoxShadow | CSS.Property.TextShadow;
xl: CSS.Property.BoxShadow | CSS.Property.TextShadow;
'2xl': CSS.Property.BoxShadow | CSS.Property.TextShadow;
outline: CSS.Property.BoxShadow | CSS.Property.TextShadow;
inner: CSS.Property.BoxShadow | CSS.Property.TextShadow;
none: CSS.Property.BoxShadow | CSS.Property.TextShadow;
'dark-lg': CSS.Property.BoxShadow | CSS.Property.TextShadow;
}
}


export const shadowsMap: Partial<ThemeShadows> = {
  xs: '0 0 0 1px rgba(0, 0, 0, 0.05)',
  sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
  base: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
  md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
  lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
  xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
  '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
  outline: '0 0 0 3px rgba(66, 153, 225, 0.6)',
  inner: 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
  none: 'none',
  'dark-lg':
  'rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 5px 10px, rgba(0, 0, 0, 0.4) 0px 15px 40px',
  };