text: /**
   *
   * DatePicker
   *
   */
  
  import styled from 'styled-components';
  import PropTypes from 'prop-types';
  import 'react-dates/lib/css/_datepicker.css';
  
  import colors from '../../assets/styles/colors';
  import sizes from '../../assets/styles/sizes';
  
  const DatePicker = styled.div`
    position: relative;
  
    ${({ isOpen }) =>
      isOpen &&
      `
      z-index: 9;
    `}
  
    * {
      font-family: 'Lato';
  
      outline: 0;
      box-sizing: border-box;
    }
  
    .DateInput {
      width: 100%;
    }
  
    svg.fa-calendar-alt {
      font-size: 14px;
    }
  
    input {
      font-weight: ${sizes.fontWeight.regular};
      position: relative;
      z-index: 1;
      width: 100%;
      height: ${sizes.input.height};
      padding: 0 ${sizes.input.padding};
      font-size: ${sizes.input.fontSize};
      cursor: pointer;
      border: 1px solid ${colors.lightGrey};
      border-radius: ${sizes.borderRadius};
      color: ${colors.black};
      background-color: transparent;
      padding-left: 42px;
      &::-webkit-input-placeholder {
        color: ${colors.greyPlaceholder};
      }
      &:disabled {
        background-color: transparent;
        cursor: not-allowed;
      }
    }
  
    .SingleDatePicker,
    .SingleDatePickerInput__withBorder {
      width: 100%;
    }
  
    .SingleDatePickerInput__withBorder {
      border: 0;
    }
  
    .DateInput_input__focused {
      border-color: ${colors.blueBorder};
    }
  
    .DayPicker_weekHeader {
      color: ${colors.black};
      border-top: 1px solid #f9f9f9;
      margin-top: -10px;
      li {
        padding-top: 7px;
        padding-bottom: 5px;
        small {
          font-size: 1.3rem;
        }
      }
    }
  
    .DayPicker__withBorder {
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      border: 1px solid #f9f9f9;
      background: white;
      position: absolute;
    }
  
    .DateInput_fang {
      display: none;
    }
  
    .CalendarMonth_caption {
      font-size: 1.3rem;
      padding-bottom: 45px;
      padding-top: 23px;
    }
  
    .DayPicker_transitionContainer {
      padding: 4px;
    }
  
    .DayPickerKeyboardShortcuts_show {
      display: none;
    }
  
    .DayPickerNavigation {
      div[role='button'] {
        font-size: 21px;
        width: 35px;
        height: 33px;
        color: ${colors.black};
        border-radius: 0;
        text-align: center;
        top: 20px;
        &,
        &:hover {
          border: 0;
        }
        &.DayPickerNavigation_leftButton__horizontalDefault {
          &::before {
            content: '‹';
          }
        }
        &.DayPickerNavigation_rightButton__horizontalDefault {
          &::before {
            content: '›';
          }
        }
        svg {
          display: none;
        }
        &:hover {
          background: #eee;
        }
      }
    }
  
    td {
      position: relative;
      cursor: pointer;
      width: 34px;
      height: 18px;
      font-size: 1.3rem;
  
      &,
      &.CalendarDay__selected,
      &.CalendarDay__selected:active,
      &.CalendarDay__selected:hover,
      &.CalendarDay__default:hover {
        border: 0;
      }
      &.CalendarDay__today {
        &::before {
          content: '';
          display: inline-block;
          border-left: 7px solid transparent;
          border-bottom: 7px solid #005fea;
          border-top-color: rgba(0, 0, 0, 0.2);
          position: absolute;
          bottom: 4px;
          right: 4px;
        }
      }
      &.CalendarDay__selected {
        background-color: #007eff;
        color: #fff;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
        &.CalendarDay__today {
          &::before {
            border-bottom: 7px solid white;
          }
        }
      }
    }
  `;
  
  DatePicker.defaultProps = {
    isOpen: false,
  };
  
  DatePicker.propTypes = {
    isOpen: PropTypes.bool,
  };
  
  export default DatePicker;
  