/* (c) Copyright Frontify Ltd., all rights reserved. */

@import url('react-datepicker/dist/react-datepicker.min.css');

.react-datepicker-popper {
    /**
     *  The Modal default z-index is 50 (vide Modal.tsx file)
     *  so it's better to place the DatePicker in a smaller z-index
     */
    z-index: 49;
}

.react-datepicker {
    display: flex;
    flex-direction: column;
}

.react-datepicker-wrap {
    font-family: var(--body-family);
    border-radius: var(--radius);
    border: 1px solid var(--line-color-x-strong);
    box-shadow: 0 3px 10px 0 rgba(8, 8, 8, 0.3);
}

.react-datepicker-popper .react-datepicker__triangle {
    z-index: 1;
}

.react-datepicker-wrap .react-datepicker__month-container {
    padding: var(--space-m);
}

.react-datepicker-wrap .react-datepicker__month {
    margin: var(--space-m) 0 0;
}

.react-datepicker-popper .react-datepicker__triangle::after {
    border-bottom-color: var(--base-color) !important;
    fill: var(--base-color) !important;
    color: var(--base-color) !important;
}

.react-datepicker-popper .react-datepicker__triangle {
    fill: var(--base-color) !important;
    color: var(--base-color) !important;
}

.react-datepicker-wrap .react-datepicker__header {
    font-size: var(--body-size-medium);
    border: none;
    background: none;
    padding: 0 0 8px 0;
}

.react-datepicker-wrap .react-datepicker__day-names {
    border-top: 1px solid var(--line-color);
    border-bottom: 1px solid var(--line-color);
    padding: var(--space-xxs) 0;
}

.react-datepicker__input-container .react-datepicker__close-icon::after {
    display: none;
}

.react-datepicker-wrap .react-datepicker__day {
    color: var(--box-disabled-color-inverse);
    font-size: 13px;
}

.react-datepicker-wrap .react-datepicker__day-name,
.react-datepicker__day,
.react-datepicker__time-name {
    margin: var(--line-width) !important;
    padding: var(--space-xxs);
    width: 2.4rem;
}

.react-datepicker-wrap .future-date,
.react-datepicker-wrap .react-datepicker__day.react-datepicker__day--keyboard-selected {
    background: var(--base-color-alt);
    color: var(--box-neutral-inverse-color);
}

.react-datepicker-wrap .react-datepicker__day--today {
    font-weight: normal;
}

.react-datepicker-wrap .react-datepicker__day--keyboard-selected,
.react-datepicker .react-datepicker__day--selected,
.react-datepicker .react-datepicker__day--selected:hover,
.react-datepicker__day.react-datepicker__day--in-range.react-datepicker__day--range-start.range-day:focus-visible,
.react-datepicker__day.react-datepicker__day--in-range.react-datepicker__day--range-end.range-day:focus-visible,
.react-datepicker__day--keyboard-selected.react-datepicker__day.react-datepicker__day--in-selecting-range.react-datepicker__day--selecting-range-start.range-day,
.react-datepicker .react-datepicker__day:focus-visible {
    background-color: var(--box-selected-strong-color);
    border-radius: 0;
    border: none;
    outline-color: #5e9ed6;
    color: var(--base-color);
}

.react-datepicker-wrap .react-datepicker__day.range-day:hover {
    border-radius: 0;
    background-color: #e3e8f6;
    color: var(--box-selected-strong-color-pressed);
}

.react-datepicker-wrap .react-datepicker__day--outside-month {
    background: none;
}

.react-datepicker-wrap .past-date.react-datepicker__day.react-datepicker__day--keyboard-selected {
    color: var(--box-disabled-color-inverse);
    background: none;
}

.react-datepicker__day.react-datepicker__day--in-range.react-datepicker__day--range-start.range-day,
.react-datepicker__day.range-day.react-datepicker__day--selected,
.react-datepicker__day.react-datepicker__day--in-range.react-datepicker__day--range-end.range-day,
.react-datepicker__day.react-datepicker__day--in-range.react-datepicker__day--range-start.react-datepicker__day--in-selecting-range.range-day,
.react-datepicker__day.react-datepicker__day--in-selecting-range.react-datepicker__day--selecting-range-start.range-day {
    background-color: #825fff;
    color: var(--base-color);
    border: none;
    outline-color: var(--base-color);
}

.react-datepicker__day--in-range.range-day,
.react-datepicker__day.react-datepicker__day--in-range.range-day,
.react-datepicker__day.react-datepicker__day--in-selecting-range.range-day {
    background-color: #f1f3f9;
    color: var(--box-selected-strong-color-pressed);
    border-radius: 0;
}

.react-datepicker__day--in-range.react-datepicker__day--outside-month {
    opacity: 0.5;
}

.react-datepicker__day.range-day {
    background: var(--base-color-alt);
    color: #2d3232;
}

.react-datepicker__day.react-datepicker__day--outside-month {
    background-color: transparent;
}

.react-datepicker__day.range-day.react-datepicker__day--disabled,
.react-datepicker-wrap .future-date.react-datepicker__day--disabled,
.react-datepicker-wrap .future-date.react-datepicker__day--disabled:hover,
.react-datepicker-wrap .past-date.react-datepicker__day--disabled,
.react-datepicker-wrap .past-date.react-datepicker__day--disabled:hover,
.react-datepicker__day.range-day.react-datepicker__day--disabled:hover {
    cursor: not-allowed;
    background-color: transparent;
    color: var(--text-color-disabled);
}

/* reset styles injected by the library */
.react-datepicker__children-container {
    width: 100%;
    margin: 0;
    padding: 0;
}

.react-colorful__interactive:focus .react-colorful__pointer {
    border-color: #5e9ed6;
}
