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

export const ThreadTimeline = style({
  height: '100%',
  position: 'relative',
});

export const ThreadTimelineContent = style({
  minHeight: '100%',
  padding: `${config.space.S400} 0`,
});

export const ThreadTimelineFloat = style({
  position: 'absolute',
  bottom: config.space.S400,
  left: '50%',
  transform: 'translateX(-50%)',
  zIndex: 1,
  minWidth: 'max-content',
});

export const ThreadCentered = style({
  height: '100%',
  padding: config.space.S700,
});

export const RootMessage = style({
  backgroundColor: color.SurfaceVariant.Container,
  borderRadius: config.radii.R400,
  marginBottom: config.space.S100,
});

export const RepliesDivider = style({
  padding: `${config.space.S200} ${config.space.S400}`,
});

export const NoReplies = style({
  padding: config.space.S400,
});

export const PendingMessage = style({
  opacity: 0.6,
});

export const PendingFailed = style({
  opacity: 1,
});