import { style } from '@vanilla-extract/css';
import { calc } from '@vanilla-extract/css-utils';

import { textEllipsis, vars } from '../css';

const statVars = vars.components.stat;

export const statsContainer = style({
  padding: `${vars.space[3]} ${vars.space[8]}`,

  border: '1px solid currentColor',
  borderTopWidth: '2px',

  fontSize: statVars.fontSizes.base,
});

export const stats = style({
  display: 'flex',
  justifyContent: 'space-evenly',
  alignItems: 'center',
  flexWrap: 'wrap',
  margin: `${calc.divide(statVars.space.gapY, -2)} ${calc.divide(
    statVars.space.gapX,
    -2,
  )}`,
});

export const stat = style({
  display: 'flex',
  alignItems: 'center',
  flexWrap: 'nowrap',
  margin: `${calc.divide(statVars.space.gapY, 2)} ${calc.divide(
    statVars.space.gapX,
    2,
  )}`,

  overflow: 'hidden',
});

export const statAccent = style([
  textEllipsis,
  {
    marginRight: vars.space[1],

    fontSize: statVars.fontSizes.accent,
    fontWeight: vars.fontWeights.bold,
  },
]);