import styled, {StyledComponent} from 'styled-components';
import {
  actionColor,
  spacing,
  borderRadius,
  gray80,
} from '@propellerads/stylevariables';

import {Input, themeAnnotation} from '@propellerads/theme-annotation';

const DatePickerControlsFields = themeAnnotation(styled.div`
  position: relative;
  padding: ${spacing * 2}px ${spacing * 3}px ${spacing * 2}px ${spacing * 11}px;
  border-radius: ${borderRadius}px;
  border: 1px solid ${gray80};
  outline: none;
  width: 145px;
    
  &:focus {
      border-color: ${actionColor};
  }
  
  input {
    border: none;
    background: transparent;
    padding: 0;
    height: 16px;
  }
`, Input) as StyledComponent<'div', any>;

const DateIcon = styled.div`
  position: absolute;
  top: 4px;
  left: 10px;
`;

export {
  DatePickerControlsFields,
  DateIcon,
};