import styled from "styled-components";
import { DatePicker } from "antd";
import { AntDatePickerProps } from ".";
import {
  whiteBackground,
  blueLightest,
  grayLight400,
  BodyText,
} from "../constants";

export const DatePickerContainer = styled.div`
  height: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  img {
    cursor: pointer;
  }
`;

export const CustomDatePicker = styled(DatePicker)<AntDatePickerProps>`
  height: 48px;
  width: ${(props) => (props.picker == "year" ? "120px" : "140px")};
  border: 2px solid ${blueLightest};
  border-radius: 4px;
  background: ${whiteBackground};
  ${BodyText}
  color: ${grayLight400};
  cursor: pointer;
  :hover {
    border: 2px solid ${blueLightest};
  }
`;
