@use '../../scss/base/variables' as var;
@use '../../scss/base/mixins' as *;

.timeframeButtonWrapper {
  display: flex;
  align-items: center;
}

.iconStyle {
  margin-right: 8px;
}
.timeframeSectionHeader {
  background: var(--lighter-gray);
  padding: 4px 8px;
  font-size: var(--font-size-12);
  &.active {
    background: var(--dark-blue);
    color: var(--white);
  }
}
.timeframeFilterWrapper {
  .datepickerContainer.dropdown-box.datepickerContainer {
    padding: 8px;
  }
  @media only screen and (max-width: var.$breakpoint-sm-max) {
    &.datepickerContainer.dropdown-box {
      left: -100%;
    }
    :global(.DateInput) {
      width: 100px;
    }
  }
}

.timeframeFilter {
  display: flex;
  align-items: center;
  padding: 16px;
  justify-content: space-between;
  .filterButton {
    border: 0;
    background: none;
    color: var(--dark-blue);
    padding: 0;
    min-width: auto;
    height: 24px;
    min-width: 24px;
    font-weight: var(--font-weight-regular);
    white-space: nowrap;
    transition: none;
    text-align: center;
    text-transform: uppercase;
    font-size: var(--font-size-12);
    &.active {
      color: var(--dark-blue);
      font-weight: var(--font-weight-semibold);
      position: relative;
      &::before {
        content: '';
        position: absolute;
        top: -5px;
        right: -5px;
        bottom: -5px;
        left: -5px;
        border: 1px solid var(--dark-blue);
        border-radius: 4px;
      }
    }
    &.disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }
  }
  .timeframeDateRange {
    &.active {
      display: flex;
      align-items: center;
      position: relative;
      transition: all 0.25s ease-in-out;
      border-radius: 4px;
      &::before {
        content: '';
        position: absolute;
        top: -8px;
        right: -8px;
        bottom: -8px;
        left: -8px;
        border: 1px solid var(--dark-blue);
        border-radius: 4px;
      }
      .datepickerContainer.dropdown-box.right {
        right: -20px;
      }
    }
    .iconStyle {
      &.calendar {
        :global(path) {
          fill: var(--dark-blue);
        }
      }
    }
  }
  .dateRange {
    margin: 0;
  }
  .datepickerContainer.dropdown-box.right {
    right: -25px;
  }
  button.selectedDate {
    border: 0;
    height: auto;
    min-width: auto;
    padding: 0;
    border-radius: unset;
    &:hover {
      background: none;
      box-shadow: none;
    }
  }
}

.timeframeContainer {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  &.disableTimeframeColumn {
    pointer-events: none;
    cursor: not-allowed;
    .timeframeSectionHeader.active {
      background: var(--medium-purple);
    }
    .timeframeSectionHeader:not(.active),
    .filterButton,
    .popover-toggle .select-box .selectedText {
      color: var(--medium-gray);
      .iconStyle {
        svg path {
          fill: var(--medium-gray);
        }
      }
    }
    .filterButton.active::before {
      border: 1px solid var(--medium-purple);
    }
  }
  .aggregationHeader {
    font-weight: var(--font-weight-bold);
    font-size: 12px;
  }
}

.datepickerContainer {
  &.dropdown-box {
    max-width: inherit;
    width: max-content;
    &.datepickerContainer {
      padding: 20px;
    }
    .dropdown {
      padding: 0;
      overflow: visible;
    }
    &.fadeOut {
      animation-duration: 0.45s !important;
    }

    &.datepickerContainer {
      &.top {
        .datepicker {
          :global(.DateRangePicker_picker),
          :global(.SingleDatePicker_picker) {
            &::after,
            &::before {
              content: '';
              width: 0;
              height: 0;
              position: absolute;
              transition: left 0.25s ease-in-out;
            }
            &::after {
              border-left: 11px solid transparent;
              border-right: 11px solid transparent;
              border-top: 11px solid var(--white);
              left: var(--caretOffsetAfter);
              bottom: -10px;
            }
            &::before {
              border-left: 12px solid transparent;
              border-right: 12px solid transparent;
              border-top: 12px solid var(--medium-purple);
              left: var(--caretOffsetBefore);
              bottom: -11px;
            }
          }
        }
      }
      &.down {
        .datepicker {
          :global(.DateRangePicker_picker),
          :global(.SingleDatePicker_picker) {
            &::after,
            &::before {
              content: '';
              width: 0;
              height: 0;
              position: absolute;
              transition: left 0.25s ease-in-out;
            }
            &::after {
              border-left: 11px solid transparent;
              border-right: 11px solid transparent;
              border-bottom: 11px solid var(--white);
              left: var(--caretOffsetAfter);
              top: -10px;
            }
            &::before {
              border-left: 12px solid transparent;
              border-right: 12px solid transparent;
              border-bottom: 12px solid var(--medium-purple);
              left: var(--caretOffsetBefore);
              top: -11px;
            }
          }
        }
      }
    }
  }
  .datepickerSearchButtons {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    button {
      margin-left: 20px;
    }
  }
  :global(.SingleDatePickerInput) {
    :global(.DateInput.DateInput_1) {
      min-width: 320px;
    }
  }
  :global(
    .DateRangePicker_picker.DateRangePicker_picker_1.DateRangePicker_picker__directionLeft.DateRangePicker_picker__directionLeft_2:not(
        &.filter-datepicker
      )
  ) {
    left: auto !important;
    right: 0;
  }
}
.aggregationDescription {
  font-size: x-small;
  color: var(--purple);
}
:global(.DayPickerNavigation_button) {
  position: absolute;
  border: 0;
  padding: 0 13px;
  height: inherit;
  top: 23px;
  background: var(--white);
  left: 22px;
  svg path {
    fill: var(--blue);
  }

  & + :global(.DayPickerNavigation_button) {
    left: unset;
    right: 22px;
  }
}
:global(.CalendarDay__default),
:global(.CalendarDay__blocked_out_of_range),
:global(.CalendarDay__blocked_out_of_range:active),
:global(.CalendarDay__blocked_out_of_range:hover) {
  border: 0;
  &:hover {
    border: 0;
  }
}
:global(.CalendarDay__selected),
:global(.CalendarDay__selected:active),
:global(.CalendarDay__selected:hover),
:global(.CalendarDay__hovered_span:hover) {
  background: rgba(var(--blue), 0.1);
  border: 0;
  position: relative;
  z-index: 100;
  color: var(--white);
  border-radius: 0 100px 100px 0;
  &::before {
    content: '';
    background: var(--blue);
    z-index: -1;
    height: 38px;
    width: 39px;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 100px;
  }
}
:global(
  .CalendarDay__default:not(.CalendarDay__selected):not(
      .CalendarDay__hovered_span
    ):not(.CalendarDay__blocked_out_of_range):not(
      .CalendarDay__selected_span
    ):hover
) {
  background: rgba(var(--blue), 0.1);
  border-radius: 100px;
}
:global(.CalendarDay__selected_span),
:global(.CalendarDay__hovered_span),
:global(.CalendarDay__selected_span:hover) {
  background: rgba(var(--blue), 0.1);
  color: var(--dark-purple);
}
.customDateIconStyle {
  justify-content: space-between;
}