import { styled } from 'styleh-components'
import { Label } from 'atoms/Text'
import { ErrorMessage } from 'atoms/Error'

const StyledLabel = styled.withComponent(Label) ``

const SelectBoxWrapper = styled.div `
  position: relative;
  margin-bottom: rem(24);
  .input-error {
    border-color: var(--color-red);
  }
`

const StyledErrorMessage = styled.withComponent(ErrorMessage) `
  color: var(--color-red);
  font-size: rem(12);
  font-weight: 500;
  position: absolute;
  bottom: -rem(18);
`

export { SelectBoxWrapper, StyledLabel, StyledErrorMessage }