@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(.SingleDatePickerInput)
      border: solid 1px $lightGray

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

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

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

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

:global
  .SingleDatePickerInput
    border: solid 1px #b5b5b5
    //padding: 3px 0 3px 10px
    min-height: 38px
    font-family: 'Helvetica', 'Arial', sans-serif
    font-size: 16px
    color: #484848

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

      .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

  .SingleDatePicker__picker
    top: 45px
    z-index: 101

  .DayPickerKeyboardShortcuts__show--bottom-right
    display: none

  .CalendarDay--selected-start
  .CalendarDay--selected-end
  .CalendarDay--selected
    background-color: $blue
    border-color: $blue

  .SingleDatePickerInput__clear-date
    float: right
    margin-right: 5px
    padding: 8px

  .SingleDatePickerInput__clear-date:focus,
  .SingleDatePickerInput__clear-date--hover
    background: none

  .DateInput--disabled,
  .DateRangePickerInput--disabled
    width: 100% !important