@import './token.less';

.@{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: @DatePicker-bg;

  // @include input-border();

  &.is-quick-edit {
    border-color: transparent;
    &:hover,&.is-focused{
      background: @DatePicker-onHover-bg;
      border-color: @DatePicker-onFocused-borderColor;

      .@{ns}-DateRangePicker-clear,.@{ns}-DateRangePicker-toggler{
        opacity: 1;
      }
    }
    .@{ns}-DateRangePicker-clear,.@{ns}-DateRangePicker-toggler{
      opacity: 0;
    }

  }

  &-input {
    display: inline-block;
    width: 100%;
    background: none;
    padding: 0;
    border: 0;
    &:focus {
      border: none;
      outline: none;
      box-sizing: none;
    }
    // &::placeholder {
    //   color: @colors-neutral-text-6;
    // }
  }

  // .@{ns}-DateRangePicker-clear {
  //   display: none;
  // }

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

    .@{ns}-DateRangePicker-clear + .@{ns}-DateRangePicker-toggler {
      display: none;
    }
    &:hover {
      background: @DatePicker-onHover-bg;
      border-color: @DatePicker-onHover-borderColor;

      .@{ns}-DateRangePicker-clear {
        display: flex;
      }
    }

    &.is-focused {
      border-color: @DatePicker-onFocused-borderColor;
      box-shadow: @Form-input-boxShadow;
    }
    // &:hover {
    //   background: @DatePicker-onHover-bg;
    //   border-color: @DatePicker-onHover-borderColor;

    //   .@{ns}-DatePicker-toggler:before {
    //     color: @DatePicker-onHover-iconColor;
    //   }
    // }
  }
  // &:not(.is-disabled) {
  //   cursor: pointer;

  //   &:hover {
  //     background: @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;

    > .@{ns}-DateRangePicker-input {
      color: @text--muted-color;
    }
  }

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

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

  &-toggler {
    // @include input-clear();
    .input-clear();
    line-height: 1;
  }

  &-clear {
    // .clearfix();
    .input-clear();
    line-height: 1;
  }
}

.@{ns}-DateRangePicker-wrap {
  width: auto;
  padding: @gap-sm;
  white-space: nowrap;
}

.@{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: 0;
  margin-left: @gap-sm;
}

.@{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: 2px 0 0;

  &.@{ns}-PopOver--leftTopLeftBottom,
  &.@{ns}-PopOver--rightTopRightBottom {
    margin: -2px 0 0;
  }
}

.@{ns}-DateRangePicker-popup {
  height: 400px;
}

.@{ns}-DateRangeCalendar {
  display: inline-block;
  border: @DatePicker-borderWidth solid @DatePicker-borderColor;
  background: @DatePicker-bg;
  border-radius: @DatePicker-borderRadius;
}