.dash-bootstrap {
  // DatePicker* are wrapped in a div with display: inline-block
  // inside FormGroup we want display: block instead.
  .form-group > div {
    display: block !important;
  }

  &.form-group > div {
    display: block !important;
  }

  .SingleDatePicker,
  .DateRangePicker {
    display: block;
  }

  .SingleDatePickerInput,
  .DateRangePickerInput {
    background-color: $input-bg;
    color: $input-color;
    display: block;
  }

  .SingleDatePickerInput__withBorder,
  .DateRangePickerInput__withBorder {
    @include border-radius($input-border-radius, 0);
    border: $input-border-width solid $input-border-color;
    display: flex;
  }

  .DateInput {
    background: transparent;
    flex-grow: 1;
    width: 100%;

    // Chrome, Firefox, Opera, Safari
    & > input::placeholder {
      color: $input-placeholder-color;
      opacity: 1; // Firefox
    }

    // Microsoft Edge
    & > input::-ms-input-placeholder {
      color: $input-placeholder-color;
    }

    // Internet Explorer
    & > input:-ms-input-placeholder {
      color: $input-placeholder-color;
    }
  }

  .DateInput_input {
    padding: $input-padding-y $input-padding-x;
    height: calc(#{$input-line-height * 1em} + #{$input-padding-y * 2});
    @include font-size($input-font-size);
    font-family: $input-font-family;
    font-weight: $input-font-weight;
    border-bottom: 0;
    background: transparent;
    text-align: center;
    color: $input-color;
  }

  .DateRangePickerInput_arrow {
    color: $input-color;
    align-self: center;
    padding: 0px 10px;
  }

  .DateInput_fang.DateInput_fang_1 {
    top: calc(#{$input-height} + 10px) !important;

    .DateInput_fangShape {
      fill: $popover-bg;
    }

    .DateInput_fangStroke {
      stroke: $popover-border-color;
    }
  }

  .SingleDatePicker_picker,
  .DateRangePicker_picker {
    top: calc(#{$input-height} + 21px) !important;
    background-color: transparent;
  }

  .DayPicker {
    background: $popover-bg;

    &.DayPicker__withBorder {
      @include border-radius($popover-border-radius, 0);
    }
  }

  .DayPicker_weekHeader {
    color: color-yiq(
      $popover-bg,
      darken($popover-bg, 50%),
      lighten($popover-bg, 50%)
    );
  }

  .DayPickerNavigation_button {
    @include border-radius($input-border-radius, 0);
    border: $input-border-width solid $popover-border-color;
    background: $popover-bg;

    svg {
      fill: $popover-body-color;
    }

    &:hover {
      $navigation-hover-bg: color-yiq(
        $popover-bg,
        darken($popover-bg, 5%),
        lighten($popover-bg, 5%)
      );
      background: $navigation-hover-bg;

      svg {
        fill: color-yiq(
          $navigation-hover-bg,
          $yiq-text-dark,
          $yiq-text-light,
          200
        );
      }
    }
  }

  .CalendarMonth_caption {
    color: $popover-body-color;
  }

  .CalendarMonthGrid {
    background-color: $popover-bg;
  }

  .CalendarMonth {
    background-color: $popover-bg;
  }

  .CalendarDay__default {
    $calendar-day-border-color: color-yiq(
      $popover-bg,
      darken($popover-bg, 10%),
      lighten($popover-bg, 10%)
    );
    color: $popover-body-color;
    border-color: $calendar-day-border-color;
    background-color: transparent;

    &:hover {
      $day-hover-bg: color-yiq(
        $popover-bg,
        darken($popover-bg, 5%),
        lighten($popover-bg, 5%)
      );

      background: $day-hover-bg;
      border-color: $calendar-day-border-color;
      color: color-yiq($day-hover-bg, $yiq-text-dark, $yiq-text-light, 200);
    }

    &.CalendarDay__selected,
    &.CalendarDay__selected:hover {
      background: theme-color("primary");
      border: 1px double theme-color("primary");
      color: color-yiq(theme-color("primary"));
    }

    &.CalendarDay__hovered_span,
    &.CalendarDay__hovered_span:hover {
      $hovered-span-bg: color-yiq(
        $popover-bg,
        lighten(theme-color("primary"), 10%),
        darken(theme-color("primary"), 10%)
      );
      background: $hovered-span-bg;
      // border:
      color: color-yiq($hovered-span-bg);
    }

    &.CalendarDay__blocked_out_of_range,
    &.CalendarDay__blocked_out_of_range:hover {
      color: color-yiq(
        $popover-bg,
        darken($popover-bg, 10%),
        lighten($popover-bg, 10%)
      );
      border-color: color-yiq(
        $popover-bg,
        darken($popover-bg, 10%),
        lighten($popover-bg, 10%)
      );
      background: $popover-bg;
      cursor: default;
    }
  }

  .CalendarDay__outside {
    border: 0;
    cursor: default;
  }

  .DayPicker_transitionContainer {
    @if $enable-rounded {
      border-radius: calc(#{$popover-border-radius} - #{$popover-border-width});
    } @else {
      border-radius: 0;
    }
  }
  .DayPickerKeyboardShortcuts_show {
    &::before {
      content: none;
    }
  }

  .DayPickerKeyboardShortcuts_show__bottomRight {
    width: 0;
    height: 0;

    border-top: 12px solid transparent;
    border-bottom: 12px solid theme-color("primary");
    border-left: 16px solid transparent;
    border-right: 16px solid theme-color("primary");
    @if $enable-rounded {
      border-bottom-right-radius: calc(
        #{$popover-border-radius} - #{$popover-border-width}
      );
    } @else {
      border-bottom-right-radius: 0;
    }

    &::before {
      border-right: 0;
      border-top: 0;
    }

    &:hover {
      border-top: 12px solid transparent;
      border-bottom: 12px solid darken(theme-color("primary"), 7.5%);
      border-left: 16px solid transparent;
      border-right: 16px solid darken(theme-color("primary"), 7.5%);
    }

    .DayPickerKeyboardShortcuts_showSpan {
      bottom: -11px;
      right: -12px;
      color: color-yiq(theme-color("primary"));
    }
  }

  .DayPickerKeyboardShortcuts_panel {
    background: $popover-bg;
    border: 1px solid $popover-border-color;
    @include border-radius($popover-border-radius, 0);
    color: $popover-body-color;

    .DayPickerKeyboardShortcuts_closeSvg {
      fill: $popover-body-color;
    }
  }
}
