import { vars } from '@quotalab/qds-token';
import { quotaSprinkles } from '@quotalab/style';
import { style } from '@vanilla-extract/css';

export const tableStyle = style([
  quotaSprinkles({
    fontSize: 'bodyMedium',
  }),
  {
    borderCollapse: 'collapse',
    boxShadow: `0 0 0 0.5px ${vars.color.borderDefault}`,
    borderRadius: '8px',
    borderStyle: 'hidden',
    overflow: 'hidden',
    width: '100%',
    tableLayout: 'fixed',
  },
]);

export const rowStyle = style({
  width: '100%',
  height: 60,
});

export const cellStyle = style([
  quotaSprinkles({
    fontSize: 'bodyMedium',
    backgroundColor: 'bgDefault',
    paddingX: 12,
  }),
  {
    border: `1px solid ${vars.color.borderDefault}`,
    borderCollapse: 'collapse',
    width: '100%',
    textAlign: 'left',
    ':first-child': {
      paddingLeft: 24,
    },
    ':last-child': {
      paddingRight: 24,
    },
  },
]);

export const headerCellStyle = style([
  quotaSprinkles({
    fontSize: 'bodyMedium',
    backgroundColor: 'bgMuted',
    paddingX: 12,
  }),
  {
    border: `1px solid ${vars.color.borderDefault}`,
    borderCollapse: 'collapse',
    width: '100%',
    textAlign: 'left',
    ':first-child': {
      paddingLeft: 24,
    },
    ':last-child': {
      paddingRight: 24,
    },
  },
]);