@import "../../../../node_modules/react-datepicker/src/stylesheets/datepicker.scss";
@import "../../sassUtils/index.scss";

.vuiDatePicker {
  position: relative;

  .react-datepicker {
    border: none;
  }

  .react-datepicker__header {
    border-bottom: 1px solid var(--vui-color-border-light);
    background-color: var(--vui-color-empty-shade);
    padding: $sizeXs 0;
  }

  .react-datepicker__navigation-icon::before {
    border-color: var(--vui-color-medium-shade);
  }

  .react-datepicker__navigation:hover *::before {
    border-color: var(--vui-color-primary-shade);
  }

  .react-datepicker__current-month {
    color: var(--vui-color-text);
  }

  .react-datepicker__month-container {
    border-bottom: 1px solid var(--vui-color-border-light);
  }

  .react-datepicker__month {
    margin: $sizeXxs;
  }

  .react-datepicker__day-name {
    color: var(--vui-color-subdued-shade);
  }

  .react-datepicker__day {
    color: var(--vui-color-text);
    margin: 1px;
    border: 1px solid var(--vui-color-empty-shade);
    width: $sizeXl;
    line-height: $sizeXl;

    &:not([aria-disabled="true"]):hover {
      border-radius: $sizeXxs;
      background-color: var(--vui-color-light-shade);
    }
  }

  .react-datepicker__day--selected,
  .react-datepicker__day--in-range,
  .react-datepicker__day--in-selecting-range,
  .react-datepicker__day--range-end {
    background-color: var(--vui-color-primary-shade) !important;
    color: var(--vui-color-empty-shade);
    border-radius: $sizeXxs;
  }

  .react-datepicker__day--keyboard-selected {
    background-color: var(--vui-color-empty-shade);
  }

  .react-datepicker__today-button {
    width: min-content;
    border-top: 0;
    padding: $sizeXs $sizeS;
    background-color: transparent;
    text-align: left;

    &:hover {
      color: var(--vui-color-primary-shade);
    }
  }

  .react-datepicker__time-container {
    overflow: hidden;
  }

  .react-datepicker__time-list-item--selected {
    background-color: var(--vui-color-primary-shade) !important;
    color: var(--vui-color-empty-shade) !important;
  }
}

.vuiDatePicker--inline {
  .react-datepicker {
    border: 1px solid var(--vui-color-border-medium);
  }
}

.vuiDateRangePickerInput {
  min-width: 340px;
}

.vuiDateRangePickerActions {
  position: absolute;
  bottom: $sizeXxs;
  right: $sizeXxs;
}