import { FunctionComponent } from 'react';
import styled, { css } from 'styled-components';

export const getBaseBorder = (color = '#DADCDF', width = '1px', style = 'solid') => `${width} ${style} ${color}`;

export const errorBorderWrap = (component: FunctionComponent) => styled(component)<any>`
    ${({ hasError }) =>
        hasError &&
        css`
            box-shadow: inset 0 0 0 2px #ff5a5e;
            &:focus {
                box-shadow: inset 0 0 0 2px #ff5a5e;
                caret-color: #ff5a5e;
            }
        `}
`;