@use '../../internals/Box/styles/index' as box;
@use '../../internals/Picker/styles/index' as picker;
@use '../../styles/colors/colors-base' as colors;
@use '../../styles/mixins/utilities' as utils;
@use '../../Button/styles/index' as button;
@use '../../Input/styles/index' as input;
@use '../../InputGroup/styles/index' as input-group;
@use '../../Calendar/styles/index' as calendar;
@use '../../DatePicker/styles/index' as date-picker;
@use '../../Stack/styles/index' as stack;

.rs-picker[data-picker='date-range'] {
  .rs-input-group-addon {
    color: var(--rs-text-secondary);
    cursor: pointer;

    .rs-btn-close {
      padding: 0;
    }
  }

  &[data-appearance='subtle'] {
    .rs-input-group {
      border-color: transparent;
    }
  }

  > .rs-input-group.rs-input-group-inside .rs-input {
    padding-inline-end: 0;
  }
}

// Date range Picker
// ----------------------

.rs-picker-popup {
  &.rs-picker-popup-daterange {
    padding: 0;

    .rs-calendar:first-child {
      border-right: 1px solid var(--rs-border-primary);
    }
  }

  .rs-calendar {
    height: 274px;
    padding-bottom: var(--rs-calendar-base-spacing);

    &-header {
      width: 100%;
      text-align: center;
    }

    &-header-month-toolbar {
      float: none;
    }
  }

  .rs-calendar-month-dropdown {
    z-index: var(--rs-zindex-date-range-picker-calendar-dropdown);
  }

  .rs-picker-daterange-panel-show-one-calendar {
    .rs-picker-toolbar {
      &-ranges {
        width: 190px;
      }
    }
  }

  .rs-picker-daterange-panel-only-time {
    height: 100%;

    .rs-picker-daterange-calendar-group {
      min-width: auto;
    }

    .rs-picker-daterange-content {
      flex: 1;
    }
  }

  // Calendar single
  .rs-picker-daterange-calendar-single {
    .rs-calendar {
      border: 0;
      display: block;
      margin: auto;
    }
  }
}

// Header
.rs-picker-daterange-header {
  --rs-date-range-picker-header-line-height: var(--rs-line-height-md);
  --rs-date-range-picker-header-padding-vertical: 8px;

  padding-block: var(--rs-date-range-picker-header-padding-vertical);
  padding-inline: var(--rs-picker-menu-padding);
  font-size: var(--rs-font-size-sm);
  line-height: var(--rs-date-range-picker-header-line-height);
  border-bottom: 1px solid var(--rs-border-primary);

  .rs-picker-header-date:focus {
    background-color: transparent;
  }

  &.rs-picker-tab-active-end,
  &.rs-picker-tab-active-start {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-around;

    &::after {
      content: ' ';
      position: absolute;
      width: 50%;
      bottom: -1px;
      border-bottom: 2px solid #3498ff;
      inset-inline-start: 0;
      transition: left 0.3s;
    }
  }

  &.rs-picker-tab-active-end {
    &::after {
      inset-inline-start: 50%;
    }
  }
}

// Calendar group
.rs-picker-daterange-calendar-group {
  display: flex;
  flex-wrap: nowrap;
  height: 274px;
  // Make sure group wrapper can put 2 date-panels even screen width is not enough.
  min-width: 492px;
}

// Predefined Ranges
.rs-picker-daterange-predefined {
  height: 366px;
  border-right: 1px solid var(--rs-border-primary);
  padding: 4px 0;

  .rs-btn {
    display: block;
  }
}