.CalendarDay--hovered,
.CalendarDay--hovered-span {
  background-color: var(--background-color-11-react-dates);
  color: var(--color-7-react-dates);
  border-color: var(--border-color-6-react-dates);
}

.CalendarDay--selected-start,
.CalendarDay--selected-end,
.CalendarDay--selected {
  background-color: var(--background-color-12-react-dates);
  border-color: var(--border-color-7-react-dates);
  color: var(--color-8-react-dates);
  font-weight: bold;
}

.DateInput__display-text--focused {
  color: var(--color-9-react-dates); }

.DateInput__display-text--has-input {
  color: var(--color-10-react-dates);
}

.DateInput__display-text--disabled {
    color: var(--disabled-text);
}

.SingleDatePickerInput {
  border-radius: var(--input-border-radius);
  border-left-width: var(--input-border-width);
  border-right-width: var(--input-border-width);
  border-top-width: var(--input-border-width);
}

.DateInput {
  line-height: 12px;
  font-size: inherit;
  font-weight: normal;
}

.DateInput--with-caret::before {
    display: none;
}
.DateInput--with-caret::after {
    display: none;
}

.DayPickerNavigation--horizontal .DayPickerNavigation__prev,
.DayPickerNavigation--horizontal .DayPickerNavigation__next {
    border-radius: var(--input-border-radius);
    border-left-width: var(--input-border-width);
    border-right-width: var(--input-border-width);
    border-top-width: var(--input-border-width);
}

.DayPickerNavigation--horizontal .DayPickerNavigation__prev:hover,
.DayPickerNavigation--horizontal .DayPickerNavigation__next:hover {
    border-color: var(--border-color-9-react-dates);
    cursor: pointer;
}

.DayPickerKeyboardShortcuts__show {
    display: none;
}

.DayPicker--horizontal {
    border-radius: var(--input-border-radius);
}

.DateInput--disabled {
    background-color: var(--disabled-background);
}

.DateInput__display-text--disabled {
    font-style: normal;
}

.DateInput__display-text--focused {
    color: var(--trace-1);
    font-weight: bold;
}

/* SingleDatePicker */
.SingleDatePickerInput:hover {
    border-color: var(--border-color-8-react-dates);
}

.SingleDatePickerInput.SingleDatePickerInput--disabled {
    border: none;
}

.SingleDatePicker__picker {
    top: 36px;
}

.SingleDatePickerInput__clear-date:focus,
.SingleDatePickerInput__clear-date--hover {
    background-color: var(--background-color-react-dates-13);
}

/* Portal */
.SingleDatePicker__picker--full-screen-portal {
    background-color: var(--background-color-14-react-dates);
}

.DateRangePicker__picker--full-screen-portal {
    background-color: var(--background-color-14-react-dates);
}

/* DateRangePicker */
.DateRangePickerInput {
    border-radius: var(--input-border-radius);
    border-left-width: var(--input-border-width);
    border-right-width: var(--input-border-width);
    border-top-width: var(--input-border-width);
    border-color: var(--border-color-10-react-dates);
}
.DateRangePickerInput:hover {
    border-color: var(--trace-1);
}

.DateRangePicker td:first-child.CalendarDay--selected-span:not(.CalendarDay--selected-start) {
    border-left: none;
}

.DateRangePicker td:last-child.CalendarDay--selected-span:not(.CalendarDay--selected-end) {
    border-right: none;
}

.DateRangePickerInput--disabled {
    background-color: var(--disabled-background);
    border: none;
}

.CalendarDay--selected-span {
    background-color: var(--background);
    color: var(--trace-1);
    border-right: none;
    border-left: none;
    border-top-color: 1px double var(--trace-1);
    border-bottom-color: var(--trace-1);
}

.CalendarDay--selected-start {
    border-left: 1px double var(--trace-1);
    border-right: none;
}
.CalendarDay--selected-end {
    border-right-color: 1px double var(--trace-1);
    border-left: none;
}

.CalendarDay--valid.CalendarDay--selected-span.CalendarDay--hovered {
    border: 1px double var(--trace-1);
    font-weight: bold;
}

.DateRangePickerInput__clear-dates--hover:enabled:hover {
    background-color: inherit;
}

.SingleDatePickerInput__clear-date svg {
    fill: var(--border);
}

.DateRangePickerInput__close-icon svg {
    fill: var(--border);
}

button.DateRangePickerInput__clear-dates  {
    box-shadow: none;
}

button.SingleDatePickerInput__clear-date {
    box-shadow: none;
}

/* Remove box shadoow added to all base buttons */
.CalendarDay__button {
    box-shadow: none;
}
