import {StyleSheet} from 'react-native';
import {CHATS_SPACING} from '@modules/chats/utils';
import {SPACING} from '@shared/theme';

export const styles = StyleSheet.create({
  container: {
    columnGap: 4,
    flexDirection: 'row',
    height: '100%',
    width: CHATS_SPACING.audioBubbleWidth,
  },
  avatarWithRateWrapper: {
    alignItems: 'center',
    aspectRatio: 1,
    height: 40,
    justifyContent: 'center',
  },
  playerWithFooterWrapper: {
    flex: 1,
    height: 40,
  },
  playerRow: {
    alignItems: 'center',
    columnGap: SPACING.x1,
    flexDirection: 'row',
    flexGrow: 1,
    height: 40,
  },
  footer: {
    alignItems: 'center',
    flexDirection: 'row',
    height: CHATS_SPACING.messageFooterTextHeight,
    justifyContent: 'space-between',
  },
  time: {
    paddingVertical: 0,
    width: SPACING.x4,
  },
});
