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

const CIRCLE_SIZE = 24;
const CONTAINER_X_PADDING = SPACING['x0.5'];
export const CIRCLE_X_TRANSLATION = CIRCLE_SIZE - CONTAINER_X_PADDING;

export const styles = StyleSheet.create({
  container: {
    borderRadius: 100,
    height: 32,
    justifyContent: 'center',
    paddingHorizontal: CONTAINER_X_PADDING,
    paddingVertical: SPACING['x0.25'],
    width: 52,
  },
  circle: {
    borderRadius: CIRCLE_SIZE / 2,
    height: CIRCLE_SIZE,
    width: CIRCLE_SIZE,
  },
});
