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

export const MEDIA_SIZE = 70;
export const DELETE_BUTTON = 20;

export const styles = StyleSheet.create({
  container: {gap: SPACING.x2, paddingRight: SPACING['x0.5']},
  multimedia: {
    borderRadius: BORDER_RADIUS.m,
    height: MEDIA_SIZE,
    overflow: 'hidden',
    width: MEDIA_SIZE,
  },
  video: {height: '100%', width: '100%'},
  playButton: {
    left: '50%',
    position: 'absolute',
    top: '50%',
    transform: [{translateX: -SPACING['x1.5']}, {translateY: -SPACING['x1.5']}],
  },
  deleteButton: {
    alignItems: 'center',
    borderRadius: BORDER_RADIUS.s,
    height: DELETE_BUTTON,
    justifyContent: 'center',
    position: 'absolute',
    right: -SPACING['x0.5'],
    width: DELETE_BUTTON,
    zIndex: 100,
  },
});
