import { keyframes, style } from '@vanilla-extract/css';
import { DefaultReset, color, config, toRem } from 'folds';

const SlideUpAnime = keyframes({
  from: {
    transform: 'translateY(100%)',
  },
  to: {
    transform: 'translateY(0)',
  },
});

export const RoomViewTyping = style([
  DefaultReset,
  {
    minHeight: toRem(28),
    padding: `0 ${config.space.S400}`,
    minWidth: 0,
    flex: 1,
    backgroundColor: 'transparent',
    color: color.Surface.OnContainer,
    pointerEvents: 'auto',
    animation: `${SlideUpAnime} 100ms ease-in-out`,
  },
]);

export const TypingText = style({
  flexGrow: 1,
  overflow: 'clip',
  overflowY: 'clip',
  lineHeight: '1.5',
});