import styled from '@emotion/native';
import Box from '../../Box';

const LegendBox = styled(Box)(({ theme }) => ({
  flexDirection: 'row',
  alignItems: 'center',
  flexWrap: 'wrap',
  marginTop: theme.__hd__.progress.space.segmentedLegendMarginTop,
}));

const LegendItem = styled(Box)(({ theme }) => ({
  flexDirection: 'row',
  alignItems: 'center',
  marginRight: theme.__hd__.progress.space.legendGap,
  marginBottom: theme.__hd__.progress.space.legendGap,
}));

const LegendCircle = styled(Box)<{ themeColor: string }>(
  ({ theme, themeColor }) => ({
    width: theme.__hd__.progress.sizes.legendWidth,
    height: theme.__hd__.progress.sizes.legendHeight,
    borderRadius: theme.__hd__.progress.radii.legendCircle,
    backgroundColor: themeColor,
    marginRight: theme.__hd__.progress.space.legendInnerGap,
  })
);

const LegendValue = styled(Box)(({ theme }) => ({
  marginLeft: theme.__hd__.progress.space.legendInnerGap,
}));

export { LegendBox, LegendCircle, LegendItem, LegendValue };