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

  color: var(--DatePicker-color);
  background: var(--DatePicker-bg);

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

    &:hover {
      background: var(--DatePicker-onHover-bg);
      border-color: var(--DatePicker-onHover-borderColor);

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

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

  &.is-disabled {
    background: $gray200;

    > .#{$ns}DateRangePicker-input {
      color: var(--text--muted-color);
    }
  }

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

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

  &-toggler {
    cursor: pointer;
    color: var(--DatePicker-iconColor);

    &:hover {
      color: var(--DatePicker-onHover-iconColor);
    }
  }

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

.#{$ns}DateRangePicker-wrap {
  width: auto;
  padding: var(--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 var(--gap-sm);
  padding: 0;
  list-style: none;
}

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

  a {
    cursor: pointer;
  }
}

.#{$ns}DateRangePicker-actions {
  text-align: right;
  margin-top: var(--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: var(--gap-sm);
  }
}

.#{$ns}DateRangeCalendar {
  display: inline-block;
  border: var(--DatePicker-borderWidth) solid var(--DatePicker-borderColor);
  background: var(--DatePicker-bg);
  border-radius: var(--DatePicker-borderRadius);
}