import { RFValue } from 'react-native-responsive-fontsize'
import styled from 'styled-components/native'

export const Container = styled.View`
  margin: ${RFValue(8)}px 0px;
`

export const Label = styled.Text`
  margin-bottom: ${RFValue(4)}px;
`
export const RadioContainer = styled.TouchableOpacity`
  flex-direction: row;
  align-items: center;
  margin-right: ${RFValue(20)}px;
  margin-top: ${RFValue(4)}px;
`

export const RadioButtonLabel = styled.Text`
  margin-right: ${RFValue(8)}px;
`

export const RadioButton = styled.View`
  width: ${RFValue(30)}px;
  height: ${RFValue(30)}px;
  border-radius: ${RFValue(15)}px;
  align-items: center;
  justify-content: center;
  background-color: ${({ theme }) => theme.colors.gray300};
`
export const RadioFill = styled.View`
  width: ${RFValue(15)}px;
  height: ${RFValue(15)}px;
  border-radius: ${RFValue(8)}px;
  background-color: ${({ theme }) => theme.colors.gray600};
`
export const Content = styled.View`
  flex-direction: row;
`

export const ErrorMessage = styled.Text`
  color: ${({ theme }) => theme.colors.danger};
  font-size: ${RFValue(10)}px;
  margin-top: ${RFValue(4)}px;
  text-align: right;
`