import styled, { css } from 'styled-components/native'

export const ReviewOrderContainer = styled.ScrollView`
  padding: 20px 40px;
  margin-bottom: 100px;
`

export const BusinessLogo = styled.View`
  margin-vertical: 5px;
  align-items: center;
`

export const FormReviews = styled.View`
  flex: 1;
  height: 100%;
  margin-top: 30px;
`

export const CommentsButtonGroup = styled.View`
  flex-direction: row;
  flex-wrap: wrap;
`

export const ActionContainer = styled.View`
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 3px 30px;
`

export const SkipButton = styled.TouchableOpacity`
`

export const RatingBarContainer = styled.View`
  margin-top: 10px;
  margin-bottom: 25px;
`

export const RatingTextContainer = styled.View`
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
`

export const MultiLogosContainer = styled.View`
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  width: 100%;
`

export const LineBackground = styled.View`
  ${({ isRepositionTop }: any) => isRepositionTop && css`
    top: 50
  `}
`
