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 (14, regular);
  position: absolute;
  bottom: -rem(20);
`

export { SelectBoxWrapper, StyledLabel, StyledErrorMessage }