Datepickr - Bootstrap5 theme

datepickr.scss

.flatpickr-calendar {

    .numInputWrapper {

        .arrowUp,
        .arrowDown {
            width: 20px;
            padding: 0;

            &:after {
                top: 50%;
                left: 50%;
                transform: translate3d(-50%, -50%, 0);
            }
        }
    }

    .flatpickr-months {

        .flatpickr-prev-month,
        .flatpickr-next-month {
            @extend .btn;
            @extend .btn-icon;
            @extend .btn-sm;
            height: auto;
            top: 8px;

            &:hover {
                svg {
                    fill: none;
                }
            }
        }

        .flatpickr-prev-month {
            left: 8px !important;
        }

        .flatpickr-next-month {
            right: 8px !important;
        }

        .flatpickr-month {

            .flatpickr-current-month {
                padding-top: 8px;
                font-size: 100%;
                width: 74%;
                left: 13%;

                select {
                    @extend .form-select;
                    @extend .form-select-sm;
                    @extend .float-start;
                    text-transform: capitalize;
                    width: 60%;
                    margin: 0;
                    height: 24px;
                }

                .numInputWrapper {
                    @extend .float-end;
                    width: 37%;

                    input {
                        @extend .form-control;
                        @extend .form-control-sm;
                        appearance: textfield;
                        height: 24px;
                    }
                }
            }
        }
    }

    .flatpickr-innerContainer {
        .flatpickr-rContainer {
            .flatpickr-weekdays {
                .flatpickr-weekdaycontainer {
                    padding: 0 7px;

                    .flatpickr-weekday {
                        text-transform: capitalize;
                    }
                }
            }

            .flatpickr-days {
                .dayContainer {
                    padding: 0 7px 2px;

                    .flatpickr-day {
                        @extend .btn;
                        @extend .btn-sm;
                        height: auto;
                        margin-bottom: 4px;

                        &.prevMonthDay,
                        &.nextMonthDay {
                            @extend .btn-light;
                        }

                        &.today {
                            @extend .btn-secondary;
                        }

                        &.selected {
                            @extend .btn-primary;
                        }
                    }
                }
            }
        }
    }
}