import styled from 'styled-components';

const DayRangePickerWrapper = styled.div`
.DateInput__display-text{
  padding: 1px 1px;
  white-space: nowrap;
  overflow: hidden;
  font-size: 66%;
  width: auto;
}
.DayPickerNavigation--horizontal .DayPickerNavigation__prev--default svg, .DayPickerNavigation--horizontal .DayPickerNavigation__next--default svg {
  height: 10px !important;
  width: 10px !important;
}

.DayPickerNavigation--horizontal .DayPickerNavigation__prev, .DayPickerNavigation--horizontal .DayPickerNavigation__next {
  border-radius: 3px !important;
  padding: 1px 1px !important;
}

.DayPicker__week-header {
  top: 62px;
  padding: 0 9px !important;
  margin-top: -2%;
}

.CalendarMonth--horizontal .CalendarMonth__caption, .CalendarMonth--vertical .CalendarMonth__caption {
  padding: 2px 0 40px !important;
}

.CalendarMonth__caption {
  margin-top: 16px !important;
  font-size: 15px !important;
  margin-bottom: 2px !important;
}

.CalendarDay__button{
  line-height: 0 !important;
  font-size: small !important;
  font : none !important;
}

.calendar-size{
  width: 618px;
  height: 329px;
}

.width{
  width : 50%;
}

.custom-datepicker-input {
  position: absolute;
  z-index: 999;
  right: 0;
  width: 620px;
  background: white;
  height: 57px;
  border-bottom: 1px solid #f5f5f5;
  .startDate, .endDate {
    width: calc(50% - 40px);
    float: left;
    height: 57px;
    padding-left: 18px;
    padding-right: 21px;
  }
  .startDate {
    border-right: 1px solid #f5f5f5;
  }
  .startDate .title, .endDate .title {
    margin: 0;
    float: left;
    height: 100%;
    line-height: 57px;
    color: rgba(0,0,0,0.7);
  }
  .date {
    clear: both;
    margin: 0;
    float: left;
    color: #de7230;
    margin-top: -19px;
    font-size: 20px;
  }
  .date-active{
    .title{
      height: 20px!important;
      line-height: 4px!important;
      margin-top: 12px!important;
    }
  }
  .icon {
    float: right;
    cursor: pointer;
    .material-icons{
      margin-top: 20px;
      font-size: 18px;
      color: rgba(0,0,0,0.7);
    }
  }
  svg.calendar {
    float: right;
    margin-top: 20px;
    font-size: 18px;
    height: 18px!important;
    width: 18px!important;
    color: rgba(0,0,0,0.7)!important;
    margin-left: 10px;
  }
}
.calendar-container{
  position: absolute;
  width: 620px;
  height: 300px;
  right: 0;
  margin-top: 48px;
}
.DateRangePickerInput__clear-dates:focus, .DateRangePickerInput__clear-dates--hover {
  background: none;
  outline: none;
}`;

export { DayRangePickerWrapper };