export const pointerSize = 12

export const bg = {
  regular: 'darkBlue.18',
  disabled: 'sandstone.55',
}

export const borderRaduis = 1

export const boxShadow = 2

export const pointerPlacement = {
  top: {
    top: 'auto',
    bottom: `-${pointerSize / 2}px`,
    left: '50%',
    right: 'auto',
    translate: '-50%, 0',
  },
  'top-start': {
    top: 'auto',
    bottom: `-${pointerSize / 2}px`,
    left: pointerSize * 2,
    right: undefined,
    translate: '-50%, 0',
  },
  'top-end': {
    top: 'auto',
    bottom: `-${pointerSize / 2}px`,
    left: undefined,
    right: pointerSize,
    translate: '-50%, 0',
  },
  right: {
    top: '50%',
    bottom: 'auto',
    left: '2px',
    right: 'auto',
    translate: '0, -50%',
  },
  'right-start': {
    top: `${pointerSize * 1.5}px`,
    bottom: 'auto',
    left: '2px',
    right: 'auto',
    translate: '0, -50%',
  },
  'right-end': {
    top: 'auto',
    bottom: `${pointerSize / 2}px`,
    left: '2px',
    right: 'auto',
    translate: '0, -50%',
  },
  bottom: {
    top: `-${pointerSize / 2}px`,
    bottom: 'auto',
    left: '50%',
    right: 'auto',
    translate: '-50%, 0',
  },
  'bottom-start': {
    top: `-${pointerSize / 2}px`,
    bottom: 'auto',
    left: pointerSize * 2,
    right: undefined,
    translate: '-50%, 0',
  },
  'bottom-end': {
    top: `-${pointerSize / 2}px`,
    bottom: 'auto',
    left: undefined,
    right: pointerSize,
    translate: '-50%, 0',
  },
  left: {
    top: '50%',
    bottom: 'auto',
    left: 'auto',
    right: '-4px',
    translate: '-50%, -50%',
  },
  'left-start': {
    top: `${pointerSize * 1.5}px`,
    bottom: 'auto',
    left: 'auto',
    right: '-4px',
    translate: '-50%, -50%',
  },
  'left-end': {
    top: 'auto',
    bottom: `${pointerSize / 2}px`,
    left: 'auto',
    right: '-4px',
    translate: '-50%, -50%',
  },
}
