/** @format */

import styled from 'styled-components';

import { AttrType } from './data';

const Container = styled.div<AttrType>`
  .ant-picker {
    border: ${props => props.border.size}px ${props => props.border.type}
      ${props => props.border.color};
    border-radius: ${props => props.border.radius}px;
    background: ${props => (props.ordinary.bg ? props.ordinary.bg : '')};
  }
  .ant-picker:hover {
    border: ${props => props.borderHover.size}px
      ${props => props.borderHover.type} ${props => props.borderHover.color};
    border-radius: ${props => props.borderHover.radius}px;
  }
  .ant-picker-focused {
    border: ${props => props.borderActive.size}px
      ${props => props.borderActive.type} ${props => props.borderActive.color} !important;
    border-radius: ${props => props.borderActive.radius}px;
  }
  .ant-picker-input > input {
    font-size: ${props => props.ordinary.textStyle.fontSize}px;
    color: ${props => props.ordinary.textStyle.color};
    font-weight: ${props => props.ordinary.textStyle.fontWeight};
    font-family: ${props => props.ordinary.textStyle.fontFamily};
  }

  .ant-picker-input > input::-webkit-input-placeholder {
    color: ${props => props.ordinary.tipStyle.color};
    font-size: ${props => props.ordinary.tipStyle.fontSize}px;
    font-weight: ${props => props.ordinary.tipStyle.fontWeight};
    font-family: ${props => props.ordinary.tipStyle.fontFamily};
  }
  .ant-picker-dropdown {
    left: 0 !important;
    top: ${props => props.size.height}px !important;
    z-index: 100;
    /* width: 100%; */
  }
  /* .ant-picker-panel-container {
    width: 100%;
  }
  .ant-picker-panel {
    width: 100%;
  }
  .ant-picker-date-panel {
    width: 100%;
  }
  .ant-picker-date-panel .ant-picker-content {
    width: 100%;
  } */
  .ant-picker-cell-inner {
    background: ${props => props.select.bg};
    color: ${props => props.select.textStyle.color};
    font-size: ${props => props.select.textStyle.fontSize}px;
    font-weight: ${props => props.select.textStyle.fontWeight};
    font-family: ${props => props.select.textStyle.fontFamily};
  }
  .ant-picker-cell-selected .ant-picker-cell-inner {
    background: ${props => props.select.selectedBg};
    color: ${props => props.select.selectedStyle.color};
    font-size: ${props => props.select.selectedStyle.fontSize}px;
    font-weight: ${props => props.select.selectedStyle.fontWeight};
    font-family: ${props => props.select.selectedStyle.fontFamily};
  }
  .ant-picker-cell-disabled .ant-picker-cell-inner {
    background: none !important;
  }
  .ant-picker-cell:hover {
    .ant-picker-cell-inner {
      background: ${props => props.select.hoverBg} !important;
      color: ${props => props.select.hoverStyle.color};
      font-size: ${props => props.select.hoverStyle.fontSize}px;
      font-weight: ${props => props.select.hoverStyle.fontWeight};
      font-family: ${props => props.select.hoverStyle.fontFamily};
    }
  }
`;

export { Container };