import styled from 'styled-components';

import {
  black,
  gray70,
  fontNormal,
} from '@propellerads/stylevariables';

const StyledDatePickerInput = styled.input`
  width: 80px;
  font-size: ${fontNormal}px;
  color: ${({isDisabled}) => (isDisabled ? gray70 : black)};
  cursor: ${({isDisabled}) => (isDisabled ? 'default' : 'auto')};
  pointer-events: ${({isDisabled}) => (isDisabled ? 'none' : 'auto')};
  background-color: transparent;
  border: 0 none;
  outline: 0 none;

  &:focus {
    border: 0 none;
    outline: 0 none;
  }
`;

export {StyledDatePickerInput};