import { shadowRGB as colorShadow } from './colorTokens';

/* global shadow tokens */
export const shadowOpacity1 = 0.2;
export const shadowOpacity2 = 0.14;
export const shadowOpacity3 = 0.12;

export const shadow1 = `0 2px 1px -1px rgba(${colorShadow}, ${shadowOpacity1}), 
0 1px 1px 0 rgba(${colorShadow}, ${shadowOpacity2}), 
0 1px 3px 0 rgba(${colorShadow},${shadowOpacity3})`;

export const shadow2 = `0 3px 1px -2px rgba(${colorShadow}, ${shadowOpacity1}), 
0 2px 2px 0 rgba(${colorShadow}, ${shadowOpacity2}), 
0 1px 5px 0 rgba(${colorShadow},${shadowOpacity3})`;

export const shadow3 = `0 3px 3px -2px rgba(${colorShadow}, ${shadowOpacity1}), 
0 3px 4px 0 rgba(${colorShadow},${shadowOpacity2}), 
0 1px 8px 0 rgba(${colorShadow},${shadowOpacity3})`;

export const shadow4 = `0 2px 4px -1px rgba(${colorShadow}, ${shadowOpacity1}), 
0 4px 5px 0 rgba(${colorShadow},${shadowOpacity2}), 
0 1px 10px 0 rgba(${colorShadow},${shadowOpacity3})`;

export const shadow5 = `0 3px 5px -1px rgba(${colorShadow}, ${shadowOpacity1}), 
0 5px 8px 0 rgba(${colorShadow}, ${shadowOpacity2}), 
0 1px 14px 0 rgba(${colorShadow}, ${shadowOpacity3})`;

export const shadow6 = `0 3px 5px -1px rgba(${colorShadow}, ${shadowOpacity1}), 
0 6px 10px 0 rgba(${colorShadow}, ${shadowOpacity2}), 
0 1px 18px 0 rgba(${colorShadow}, ${shadowOpacity3})`;

export const shadow7 = `0 4px 5px -2px rgba(${colorShadow}, ${shadowOpacity1}), 
0 7px 10px 1px rgba(${colorShadow}, ${shadowOpacity2}), 
0 2px 16px 1px rgba(${colorShadow}, ${shadowOpacity3})`;

export const shadow8 = `0 5px 5px -3px rgba(${colorShadow}, ${shadowOpacity1}), 
0 8px 10px 1px rgba(${colorShadow}, ${shadowOpacity2}), 
0 3px 14px 2px rgba(${colorShadow}, ${shadowOpacity3})`;

export const shadow9 = `0 5px 6px -3px rgba(${colorShadow}, ${shadowOpacity1}), 
0 9px 12px 1px rgba(${colorShadow}, ${shadowOpacity2}), 
0 3px 16px 2px rgba(${colorShadow}, ${shadowOpacity3})`;

export const shadow10 = `0 6px 6px -3px rgba(${colorShadow}, ${shadowOpacity1}), 
0 10px 14px 1px rgba(${colorShadow}, ${shadowOpacity2}), 
0 4px 18px 3px rgba(${colorShadow}, ${shadowOpacity3})`;

export const shadow11 = `0 6px 7px -4px rgba(${colorShadow}, ${shadowOpacity1}), 
0 11px 15px 1px rgba(${colorShadow}, ${shadowOpacity2}), 
0 4px 20px 3px rgba(${colorShadow}, ${shadowOpacity3})`;

export const shadow12 = `0 7px 8px -4px rgba(${colorShadow}, ${shadowOpacity1}), 
0 12px 17px 2px rgba(${colorShadow}, ${shadowOpacity2}), 
0 5px 22px 4px rgba(${colorShadow}, ${shadowOpacity3})`;

export const shadow13 = `0 7px 8px -4px rgba(${colorShadow}, ${shadowOpacity1}), 
0 13px 19px 2px rgba(${colorShadow}, ${shadowOpacity2}), 
0 5px 24px 4px rgba(${colorShadow}, ${shadowOpacity3})`;

export const shadow14 = `0 7px 9px -4px rgba(${colorShadow}, ${shadowOpacity1}), 
0 14px 21px 2px rgba(${colorShadow}, ${shadowOpacity2}), 
0 5px 26px 4px rgba(${colorShadow}, ${shadowOpacity3})`;

export const shadow15 = `0 8px 9px -5px rgba(${colorShadow}, ${shadowOpacity1}), 
0 15px 22px 2px rgba(${colorShadow}, ${shadowOpacity2}), 
0 6px 28px 5px rgba(${colorShadow}, ${shadowOpacity3})`;

export const shadow16 = `0 8px 10px -5px rgba(${colorShadow}, ${shadowOpacity1}), 
0 16px 24px 2px rgba(${colorShadow}, ${shadowOpacity2}), 
0 6px 30px 5px rgba(${colorShadow}, ${shadowOpacity3})`;

export const shadow17 = `0 8px 11px -5px rgba(${colorShadow}, ${shadowOpacity1}), 
0 17px 26px 2px rgba(${colorShadow}, ${shadowOpacity2}), 
0 6px 32px 5px rgba(${colorShadow}, ${shadowOpacity3})`;

export const shadow18 = `0 9px 11px -5px rgba(${colorShadow}, ${shadowOpacity1}), 
0 18px 28px 2px rgba(${colorShadow}, ${shadowOpacity2}), 
0 7px 34px 6px rgba(${colorShadow}, ${shadowOpacity3})`;

export const shadow19 = `0 9px 12px -6px rgba(${colorShadow}, ${shadowOpacity1}), 
0 19px 29px 2px rgba(${colorShadow}, ${shadowOpacity2}), 
0 7px 36px 6px rgba(${colorShadow}, ${shadowOpacity3})`;

export const shadow20 = `0 10px 13px -6px rgba(${colorShadow}, ${shadowOpacity1}), 
0 20px 31px 3px rgba(${colorShadow}, ${shadowOpacity2}), 
0 8px 38px 7px rgba(${colorShadow}, ${shadowOpacity3})`;

export const shadow21 = `0 10px 13px -6px rgba(${colorShadow}, ${shadowOpacity1}), 
0 21px 33px 3px rgba(${colorShadow}, ${shadowOpacity2}), 
0 8px 40px 7px rgba(${colorShadow}, ${shadowOpacity3})`;

export const shadow22 = `0 10px 14px -6px rgba(${colorShadow}, ${shadowOpacity1}), 
0 22px 35px 3px rgba(${colorShadow}, ${shadowOpacity2}), 
0 8px 42px 7px rgba(${colorShadow}, ${shadowOpacity3})`;

export const shadow23 = `0 11px 14px -7px rgba(${colorShadow}, ${shadowOpacity1}), 
0 23px 36px 3px rgba(${colorShadow}, ${shadowOpacity2}), 
0 9px 44px 8px rgba(${colorShadow}, ${shadowOpacity3})`;

export const shadow24 = `0 11px 15px -7px rgba(${colorShadow}, ${shadowOpacity1}), 
0 24px 38px 3px rgba(${colorShadow}, ${shadowOpacity2}), 
0 9px 46px 8px rgba(${colorShadow}, ${shadowOpacity3})`;

/* alias shadow tokens */
export const shadowAppbar = shadow4;
export const shadowButton = shadow2;
export const shadowButtonPressed = shadow8;
export const shadowCard = shadow2;
export const shadowDialog = shadow23;

export interface shadowTokens {
  shadowOpacity1: number;
  shadowOpacity2: number;
  shadowOpacity3: number;
  shadow1: string;
  shadow2: string;
  shadow3: string;
  shadow4: string;
  shadow5: string;
  shadow6: string;
  shadow7: string;
  shadow8: string;
  shadow9: string;
  shadow10: string;
  shadow11: string;
  shadow12: string;
  shadow13: string;
  shadow14: string;
  shadow15: string;
  shadow16: string;
  shadow17: string;
  shadow18: string;
  shadow19: string;
  shadow20: string;
  shadow21: string;
  shadow22: string;
  shadow23: string;
  shadow24: string;
  shadowAppbar: string;
  shadowButton: string;
  shadowButtonPressed: string;
  shadowCard: string;
  shadowDialog: string;
}