import styled from 'styled-components';
import { REM_FONT_SIZE___SM, SUNSET_ORANGE, VERY_LIGHT_TANGELO } from '@vincent_za/styles';

export const STYLES_PLACEHOLDER_ACTIVE = `
  top: 2px;
  font-size: ${REM_FONT_SIZE___SM};
  transform: translateY(0);
`;

export default styled.div`
  position: absolute;
  top: 50%;
  left: 0;
  color: ${props => props.isError ? SUNSET_ORANGE : 'rgba(0, 0, 0, 0.3)'};
  pointer-events: none;
  transform: translateY(-50%);
  transition: top 0.1s ease-out, transform 0.1s ease-out, font-size 0.1s ease-out;

  ${props => props.hasValue && STYLES_PLACEHOLDER_ACTIVE};
  ${props => !props.isError && props.isInfo && `color: ${VERY_LIGHT_TANGELO};`};
`;
