import {StyleSheet} from 'react-native';
import {SPACING} from '@shared/theme';

export const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    flexDirection: 'row',
    left: SPACING.x2,
    position: 'absolute',
  },
  timeWithLottie: {
    alignItems: 'center',
    flexDirection: 'row',
    zIndex: 2,
  },
  micWrapper: {
    alignItems: 'center',
    aspectRatio: 1,
    justifyContent: 'center',
    width: 40,
  },
  lottieMicWrapper: {
    bottom: -18,
    height: 100,
    position: 'absolute',
    width: 80,
  },
  lottie: {
    flexGrow: 1,
    flex: 1,
    height: '100%',
    opacity: 1,
    width: '100%',
  },
  swipeToCancel: {
    alignItems: 'center',
    flexDirection: 'row',
    gap: SPACING['x0.5'],
    justifyContent: 'center',
    marginLeft: SPACING['x2.5'],
    width: '100%',
  },
  infoPopup: {
    bottom: 60,
    position: 'absolute',
    right: SPACING.x2,
  },
  timerContainer: {minWidth: 40},
});
