import { transparentize } from '@chakra-ui/theme-tools';

import { colors } from './colors';

const createOutline = (colorScheme = 'gray') =>
  `0 0 0 3px ${transparentize(`${colorScheme}.500`, 0.3)({ colors })}`;

export const shadows = {
  outline: createOutline('brand'),
  'outline-brand': '0 0 0 1px brand.900',
  'outline-gray': createOutline('gray'),
  'outline-over': `4px 4px 5px #00000088`,
  'outline-darkgray': `0 0 0 3px ${transparentize(
    'gray.500',
    0.8
  )({ colors })}`,
  'outline-success': createOutline('success'),
  'outline-warning': createOutline('warning'),
  'outline-error': createOutline('error'),
  'outline-doing': createOutline('doing'),
  'outline-paused': createOutline('paused'),
  layout: '0 0 24px 1px rgba(0, 0, 0, 0.05)',
  smooth: 'inset 0px 0px 16px rgba(0, 0, 0, 0.05)',
  // smooth-light is used for dark backgrounds
  'smooth-light': 'inset 0px 0px 16px rgba(255, 255, 255, 0.1)',
};
