@import "../css/colors"
@import "../css/vars"

:local
  .wrapper
    position: relative
    display: flex
    flex-direction: column
    flex-grow: 1
    align-self: flex-start

:local
  .wrapper.readonly :global(.DateRangePickerInput)
      border: solid 1px $lightGray

  .wrapper.error :global(.DateRangePickerInput)
      border: solid 1px $red

  .wrapper.warning :global(.DateRangePickerInput)
      border: solid 1px $yellow

  .wrapper.info :global(.DateRangePickerInput)
      border: solid 1px $blue

  .wrapper.success :global(.DateRangePickerInput)
      border: solid 1px $green

:global
  .DateRangePickerInput
    border: solid 1px #b5b5b5
    min-height: 48px
    font-family: 'Helvetica', 'Arial', sans-serif
    font-size: 16px
    color: #484848
    width: 100%

    .DateInput
      font-family: 'Poppins', 'FreeSans', 'Arimo', 'Droid Sans', 'Helvetica', 'Arial', sans-serif
      font-size: 16px
      color: #484848
      padding: 3px 0 3px 10px
      width: 40%
      box-sizing: border-box
      line-height: 40px

      @media only screen and (max-width: 670px)
        width: 35%

      .DateInput__input
        //width: auto

      .DateInput__display-text
        color: $borderGray
        font-weight: 300
        padding: 0px

      .DateInput__display-text--has-input
        color: #484848

      .DateInput__display-text--focused
        background: none
        border-radius: 0px

  .DateInput--with-caret::before
    top: 33px

  .DateInput--with-caret::after
    top: 34px

  .DateRangePicker__picker
    top: 45px

  .DayPickerKeyboardShortcuts__show--bottom-right
    display: none

  .CalendarDay--hovered,
  .CalendarDay--selected-start
  .CalendarDay--selected-end
  .CalendarDay--selected
    color: #fff
    background-color: $red !important
    border-color: $red !important

  .DateRangePickerInput__clear-dates
    float: right
    margin-right: 5px
    padding: 8px

  .DateRangePickerInput__clear-dates:focus,
  .DateRangePickerInput__clear-dates--hover
    background: none

  .DateRangePickerInput__arrow
    margin-right: 10px

  .CalendarDay--selected-span.CalendarDay--hovered,
  .CalendarDay--selected-span:active,
  .CalendarDay--selected-span,
  .CalendarDay--hovered-span,
  .CalendarDay--after-hovered-start
    background: $blue
    border-color: $blue
    color: #fff

  .DateInput--disabled,
  .DateRangePickerInput--disabled
    background-color: #ededeb;
    color: #b5b5b5;

  .DateRangePickerInput__arrow svg
     fill: #b5b5b5