const baseStyle = {}

const defaultProps = {
  size: 'md',
  variant: 'light',
}

const sizes = {
  sm: {
    item: {
      minH: '32px',
    },
    itemHorizontal: {
      space: '8px',
    },
  },
  md: {
    item: {
      minH: '40px',
    },
    itemHorizontal: {
      space: '12px',
    },
  },
  lg: {
    item: {
      minH: '48px',
    },
    itemHorizontal: {
      space: '14px',
    },
  },
}

const variants = {
  light: {
    container: {
      bg: 'white',
      borderColor: 'sandstone.main',
    },
    item: {
      borderColor: 'sandstone.main',
      itemTitleHoverBg: 'skyBlue.95',
      expandedItemTitleHoverBg: 'skyBlue.90',
    },
    icon: {
      color: 'sandstone.10',
    },
  },
  dark: {
    container: {
      bg: 'darkBlue.main',
      borderColor: 'white',
      color: 'white',
    },
    item: {
      borderColor: 'white',
      disabledBg: 'transparent',
      itemTitleHoverBg: 'seaBlue.35',
      expandedItemTitleHoverBg: 'seaBlue.25',
    },
    icon: {
      color: 'digiGreen.main',
    },
  },
}

export default {
  baseStyle,
  defaultProps,
  sizes,
  variants,
}
