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

export const componentNameStyle = quotaSprinkles({
  textDecoration: 'underline',
  cursor: 'pointer',
});

export const nameColumnStyle = style({
  width: '600px',
});

export const progressCardStyle = style([
  quotaSprinkles({
    width: 'full',
    paddingX: 12,
    paddingY: 16,
    borderRadius: 8,
  }),
  {
    border: `1px solid ${vars.color.borderDefault}`,
  },
]);

export const progressRateTxtStyle = quotaSprinkles({
  lineHeight: 'bodyLargeBody',
});