.datepicker-modal {
    background-color: var(--color-bg-secondary);
    padding-bottom: 20px;

    & input.dropdown-trigger {
        pointer-events: none;
    }

    & .datepicker-date-display, .datepicker-footer {
        display: none;
    }

    & .dropdown-trigger {
        color: var(--color-text-primary);
    }

    & .month-prev, .month-next {
        &:focus {
            color: var(--color-text-white);
            background-color: var(--color-primary);
        }

        & svg {
            fill: var(--color-text-primary);

        }
    }

    & .datepicker-table {
        td {
            padding: 1px;
            color: var(--color-text-primary);

            & .datepicker-day-button {
                border-radius: 10px;
                border: 1px solid var(--color-border-input);

                &:hover {
                    background-color: var(--color-primary);
                    border: 1px solid var(--color-primary);
                    color: var(--color-text-white);
                }
            }

            &.is-disabled {
                color: var(--color-text-secondary);
                opacity: 0.5;
            }

            &.is-today {
                color: var(--color-primary);
            }

            &.is-selected {
                background-color: transparent;
                color: var(--color-text-white);

                & .datepicker-day-button {
                    background-color: var(--color-primary);
                }
            }
        }
    }
}