import { popupSurfaceStyle } from './popupStyles';

export const TASK_TABLE_TH_STYLE = {
  fontSize: 10,
  fontWeight: 500,
  textTransform: 'uppercase',
  letterSpacing: 0.6,
  color: 'var(--text-muted)',
  textAlign: 'left',
  padding: '0 0 12px 5px',
  border: 'none',
  background: 'transparent',
  verticalAlign: 'top',
};

export const TASK_TABLE_TD_BASE = {
  padding: '5px',
  border: 'none',
  background: 'transparent',
  overflow: 'hidden',
  textOverflow: 'ellipsis',
  whiteSpace: 'nowrap',
};

export const TASK_MODAL_TITLE_STYLE = {
  fontSize: 11,
  fontWeight: 500,
  textTransform: 'uppercase',
  letterSpacing: 0.8,
  color: 'var(--text-secondary)',
};

export const TASK_MODAL_LABEL_STYLE = {
  fontSize: 11,
  fontWeight: 500,
  color: 'var(--text-secondary)',
  textTransform: 'uppercase',
  letterSpacing: 0.8,
  marginBottom: 6,
};

export const TASK_MODAL_INPUT_STYLE = {
  fontSize: 13,
  padding: '0 5px',
  textAlign: 'left',
  lineHeight: 1,
};

export const TASK_MODAL_BUTTON_STYLE = {
  lineHeight: 1,
  display: 'inline-flex',
  alignItems: 'center',
  justifyContent: 'center',
};

export const TASK_MODAL_SHELL_STYLE = {
  ...popupSurfaceStyle,
  background: 'var(--card-bg)',
  width: 'min(720px, 96vw)',
  maxHeight: 'calc(100vh - 48px)',
  overflowY: 'auto',
};

export const PROJECT_MODAL_SHELL_STYLE = {
  ...popupSurfaceStyle,
  background: 'var(--card-bg)',
  width: 'min(434px, 100%)',
  maxHeight: 'calc(100vh - 48px)',
  overflowY: 'auto',
};