export const nodeStyles = {
  nodeContainer: {
    color: '#000000',
    borderRadius: '1rem',
    display: 'flex',
  },
  // avoid position: relative and position: absolute, as it may break the layout in Safari.
  nodeDetails: {
    width: '100%',
    flex: 1,
    display: 'flex',
    justifyContent: 'flex-start',
    flexDirection: 'column',
    borderRadius: '1rem',
    paddingTop: '35px',
    paddingRight: '12px',
    paddingBottom: '12px',
    paddingLeft: '12px',
    gap: '4px',
  },
  nodeImg: {
    width: '56px',
    height: '56px',
    minWidth: '56px',
    minHeight: '56px',
    borderRadius: '50%',
  },
  nodeImgContainer: {
    width: '56px',
    height: '56px',
    minWidth: '56px',
    minHeight: '56px',
    marginTop: 'calc(-1 * (36px + 56px / 2))',
    marginLeft: 'calc(50% - (56px / 2))',
  },
  nodeInitialLetters: {
    width: '56px',
    height: '56px',
    minWidth: '56px',
    minHeight: '56px',
    borderRadius: '50%',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    fontSize: '24px',
    lineHeight: '30px',
    color: '#f4f5f7',
    marginBottom: '-56px',
  },
  nodeName: {
    fontSize: '16px',
    lineHeight: '21.98px',
    fontWeight: 600,
    color: '#111927',
    display: '-webkit-box',
    WebkitLineClamp: 1,
    WebkitBoxOrient: 'vertical',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
  },
  nodeDepartment: {
    fontSize: '12px',
    lineHeight: '19.92px',
    fontWeight: 600,
    color: '#1976D2',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    display: '-webkit-box',
    WebkitLineClamp: 1,
    WebkitBoxOrient: 'vertical',
  },
  nodePosition: {
    fontSize: '14px',
    lineHeight: '21.98px',
    fontWeight: 400,
    color: '#111927',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    display: '-webkit-box',
    WebkitLineClamp: 1,
    WebkitBoxOrient: 'vertical',
  },
  nodeRole: {
    fontSize: '14px',
    fontWeight: 400,
    color: '#111927',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap',
  },
  hireDate: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: '6px',
    paddingRight: '10px',
    paddingLeft: '10px',
    height: '24px',
  },
  directSubordinates: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    marginLeft: '4px',
    color: '#2962ff',
    fontSize: '14px',
  },
  timeHighlighted: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'transparent',
    borderRadius: '6px',
    paddingRight: '10px',
    paddingLeft: '10px',
    border: '1px solid',
    marginLeft: '4px',
    height: '24px',
  },
};
