import { displayFlex, styled, textEllipsis } from '../../../styles';
import { IconButton } from '../../../ui/button/icon-button';

export const StyleWorkspaceInfo = styled('div')(() => {
  return {
    marginLeft: '15px',
    width: '202px',
    p: {
      height: '20px',
      fontSize: 'var(--affine-font-sm)',
      ...displayFlex('flex-start', 'center'),
    },
    svg: {
      marginRight: '10px',
      fontSize: '16px',
      flexShrink: 0,
    },
    span: {
      flexGrow: 1,
      ...textEllipsis(1),
    },
  };
});

export const StyleWorkspaceTitle = styled('div')(() => {
  return {
    fontSize: 'var(--affine-font-base)',
    fontWeight: 600,
    lineHeight: '24px',
    marginBottom: '10px',
    maxWidth: '200px',
    ...textEllipsis(1),
  };
});

export const StyledCard = styled('div')<{
  active?: boolean;
}>(({ active }) => {
  const borderColor = active ? 'var(--affine-primary-color)' : 'transparent';
  return {
    width: '310px',
    height: '124px',
    cursor: 'pointer',
    padding: '16px',
    boxShadow: 'var(--affine-shadow-1)',
    borderRadius: '12px',
    border: `1px solid ${borderColor}`,
    ...displayFlex('flex-start', 'flex-start'),
    marginBottom: '24px',
    transition: 'background .2s',
    background: 'var(--affine-white-80)',
    position: 'relative',
    ':hover': {
      background: 'var(--affine-hover-color)',
      '.add-icon': {
        borderColor: 'var(--affine-primary-color)',
        color: 'var(--affine-primary-color)',
      },
      '.setting-entry': {
        opacity: 1,
        pointerEvents: 'auto',
      },
    },
    '@media (max-width: 720px)': {
      width: '100%',
    },
  };
});

export const StyledModalHeader = styled('div')(() => {
  return {
    width: '100%',
    height: '72px',
    position: 'absolute',
    left: 0,
    top: 0,
    borderRadius: '24px 24px 0 0',
    padding: '0 40px',
    ...displayFlex('space-between', 'center'),
  };
});

export const StyledSettingLink = styled(IconButton)(() => {
  return {
    position: 'absolute',
    right: '6px',
    bottom: '6px',
    opacity: 0,
    borderRadius: '4px',
    color: 'var(--affine-primary-color)',
    pointerEvents: 'none',
    transition: 'all .15s',
    ':hover': {
      background: 'var(--affine-hover-color)',
    },
  };
});
