import { moderateScale } from 'react-native-size-matters';
import styled from 'styled-components/native';
import { getShadow, getTheme, ifStyle } from '../../utils/helpers';
import DefaultIcon from '../Icon';
import Touchable from '../Touchable';
import Typography from '../Typography';
const brandContrast = getTheme('brand.primary.contrast');
const brandAccent = getTheme('brand.accent.main');
const isRelative = ifStyle('relativePos');
export const Wrapper = styled(Touchable) `
  position: ${isRelative('relative', 'absolute')};
  width: ${({ size }) => size}px;
  height: ${({ size }) => size}px;
  align-items: center;
  justify-content: center;
  background-color: ${({ color }) => color || brandAccent};
  border-radius: ${({ size }) => size / 2}px;
  ${({ hasShadow }) => (hasShadow ? getShadow() : {})}
`;
export const Icon = styled(DefaultIcon).attrs((props) => ({
    color: props.iconColor || brandContrast(props),
    touchable: false,
    size: props.iconSize ? moderateScale(props.iconSize) : moderateScale(24),
})) ``;
export const Title = styled(Typography).attrs({
    variant: 'xs',
}) `
  color: ${brandContrast};
  font-weight: 700;
`;
//# sourceMappingURL=styles.js.map