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

export const MEDIA_SIZE = 70;
export const styles = StyleSheet.create({
  commonSize: {
    height: MEDIA_SIZE,
    width: MEDIA_SIZE,
  },
  gifContainer: {
    marginLeft: SPACING.x2,
    marginTop: SPACING.x1,
  },
  gifMediaContainer: {
    borderRadius: BORDER_RADIUS.l,
    overflow: 'hidden',
  },
  deleteButtonContainer: {
    position: 'absolute',
    right: -SPACING.x1,
    top: -SPACING.x1,
  },
  deleteContainer: {
    borderRadius: BORDER_RADIUS.m,
    padding: SPACING['x0.25'],
  },
  mediaContainer: {
    borderRadius: BORDER_RADIUS.m,
    marginLeft: SPACING.x2,
  },
  attachmentsContainer: {
    flexDirection: 'row',
    gap: SPACING.x1,
    marginBottom: SPACING.x1,
    paddingHorizontal: SPACING.x2,
  },
  attachmentsContainerFocused: {marginBottom: SPACING.x5},
  borderRadius: {borderRadius: BORDER_RADIUS.m},
});
