import { cssVar } from '@toeverything/theme';
import { keyframes, style } from '@vanilla-extract/css';
export const layout = style({
  margin: '80px auto',
  maxWidth: '536px',
});
export const upgradeBox = style({
  padding: '48px 52px',
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
});
export const upgradeTips = style({
  margin: '20px 0',
  color: cssVar('textSecondaryColor'),
  fontSize: '12px',
  fontStyle: 'normal',
  fontWeight: '400',
  lineHeight: '20px',
  textAlign: 'center',
});
const rotate = keyframes({
  '0%': {
    transform: 'rotate(0deg)',
  },
  '50%': {
    transform: 'rotate(180deg)',
  },
  '100%': {
    transform: 'rotate(360deg)',
  },
});
export const loadingIcon = style({
  animation: `${rotate} 1.2s infinite linear`,
});
