.#{$ns}DateRangePicker {
  position: relative;
  display: inline-flex;
  flex-wrap: nowrap;
  border: $DatePicker-borderWidth solid $DatePicker-borderColor;
  font-size: $DatePicker-fontSize;
  padding: $DatePicker-paddingY $DatePicker-paddingX;
  height: $DatePicker-height;
  outline: none;
  border-radius: $DatePicker-borderRadius;

  color: $DatePicker-color;
  background-color: $DatePicker-bg;

  &:not(.is-disabled) {
    cursor: pointer;

    &:hover {
      background-color: $DatePicker-onHover-bg;
      border-color: $DatePicker-onHover-borderColor;

      .#{$ns}DateRangePicker-toggler {
        color: $DatePicker-onHover-iconColor;
      }
    }
  }

  &.is-focused {
    border-color: $DatePicker-onFocused-borderColor;
    box-shadow: $Form-input-boxShadow;
  }

  &.is-disabled {
    background: $gray200;

    >&-input {
      color: $text--muted-color;
    }
  }

  &-placeholder {
    color: $DatePicker-placeholderColor;
    user-select: none;
    margin-right: $gap-base;
    flex-basis: 0;
    flex-grow: 1;
  }

  &-value {
    margin-right: $gap-base;
    flex-basis: 0;
    flex-grow: 1;
  }

  &-toggler {
    cursor: pointer;
    color: $DatePicker-iconColor;

    &:hover {
      color: $DatePicker-onHover-iconColor;
    }
  }

  &-clear {
    @include input-clear();
    display: inline-block;
    line-height: 1;
    margin-right: $gap-xs;
  }
}

.#{$ns}DateRangePicker-wrap {
  width: auto;
  padding: $gap-sm;
}

.#{$ns}DateRangePicker-start,
.#{$ns}DateRangePicker-end {
  display: inline-block;
  vertical-align: top;

  .rdtPicker {
    padding: 0;
    box-shadow: none;
    border: none;
  }
}

.#{$ns}DateRangePicker-end {
  margin-top: 20px;
}

.#{$ns}DateRangePicker-rangers {
  margin: 0 0 $gap-sm;
  padding: 0;
  list-style: none;
}

.#{$ns}DateRangePicker-ranger {
  display: inline-block;
  margin-right: $gap-sm;

  a {
    cursor: pointer;
  }
}

.#{$ns}DateRangePicker-actions {
  text-align: right;
  margin-top: $gap-sm;
}

.#{$ns}DateRangeControl:not(.is-inline)>.#{$ns}DateRangePicker {
  display: flex;
}

.#{$ns}DateRangePicker-popover {
  margin: px2rem(2px) 0 0;

  &.#{$ns}PopOver--leftTopLeftBottom,
  &.#{$ns}PopOver--rightTopRightBottom {
    margin: px2rem(-2px) 0 0;
  }
}

@include media-breakpoint-up(sm) {
  .#{$ns}DateRangePicker-wrap {
    white-space: nowrap;
  }

  .#{$ns}DateRangePicker-end {
    margin-top: 0;
    margin-left: $gap-sm;
  }
}