.fhi-datepicker {
    position: relative;

    &__label {
        display: inline-block;
    }

    &__description {
        color: $fhi-core-grey-3;
        display: block;
        margin-bottom: $fhi-core-space-1;

        .fhi-datepicker__label + & {
            margin-top: ($fhi-core-space-2 * -1);
        }
    }

    &__toggler {
        appearance: none;
        --webkit-appearance: none;

        background-color: transparent;
        border: 0;
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        height: $fhi-core-px * 40;
        justify-content: center;
        left: 0;
        position: absolute;
        width: $fhi-core-px * 40;

        [class*="icon-"] {
            background-size: contain;
            left: $fhi-core-space-2;
            position: absolute;
        }

        &:focus-visible {
            + .form-control,
            + div .form-control {
                border-top-left-radius: $fhi-core-input-height;
                border-bottom-left-radius: $fhi-core-input-height;
            }
        }
    }

    &__form-control {
        width: $fhi-core-px * 140; // will be replaced by $date-picker-width when moved to component
        padding-left: $fhi-core-px * 40;

        &,
        &.is-invalid {
            padding-right: 0;
        }
    }

    .ngb-dp-header,
    .ngb-dp-weekdays {
        background-color: transparent;
    }

    ngb-datepicker {
        max-width: 88vw;
        width: $fhi-core-px * 308;
    }

    ngb-datepicker,
    .ngb-dp-weekdays {
        border: 0;
    }

    .ngb-dp-month,
    .ngb-dp-week,
    .ngb-dp-day,
    .ngb-dp-weekday,
    .ngb-dp-week-number {
        width: 100%;
    }

    .ngb-dp-day,
    .ngb-dp-weekday,
    .ngb-dp-week-number {
        height: auto;
    }

    .ngb-dp-weekday,
    .ngb-dp-week-number {
        color: $body-color;
        font-style: normal;
    }

    .ngb-dp-day:focus-visible {
        box-shadow: none !important;
    }

    ngb-datepicker-navigation-select > .form-select {
        font-size: $fhi-core-font-size-2;
        height: $fhi-core-px * 44;
    }

    .ngb-dp-navigation-select {
        .form-select {
            &:first-child {
                margin-right: ($fhi-core-space-1 * 0.5);
            }
            &:last-child {
                margin-left: ($fhi-core-space-1 * 0.5);
            }
        }
    }

    .ngb-dp-arrow-btn {
        &:hover {
            background: transparent;
        }
        &:focus {
            box-shadow: none;
        }
    }

    .ngb-dp-navigation-chevron {
        background-image: url('data:image/svg+xml;utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" %3E%3Cpath d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.146-3.146a.5.5 0 0 0-.707-.707l-4 4a.5.5 0 0 0 0 .707l4 4a.5.5 0 1 0 .707-.707L2.707 8.5H14.5A.5.5 0 0 0 15 8z"/%3E%3C/svg%3E');
        background-repeat: no-repeat;
        background-size: contain;
        border: 0;
        filter: $fhi-core-red-filter;
        height: $fhi-core-px * 24;
        margin: 0;
        transform: none;
        width: $fhi-core-px * 24;
    }

    .ngb-dp-arrow {
        height: auto;
    }

    .ngb-dp-arrow.right,
    .ngb-dp-arrow-next {
        .ngb-dp-navigation-chevron {
            margin: 0;
            transform: rotate(180deg);
        }
    }

    [ngbDatepickerDayView] {
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        height: 0;
        justify-content: center;
        margin: auto;
        max-width: $fhi-core-px * 44;
        padding-top: 50%;
        padding-bottom: 50%;
        width: 100%;
    }

    [ngbDatepickerDayView] {
        transition: background-color 0.15s;

        &:hover:not(.bg-primary) {
            background-color: $fhi-core-grey-light-2;
            outline: 0;
        }

        &.active {
            background-color: transparent !important;
            box-shadow:
                0 0 0 2px $fhi-core-blue-1 inset,
                0 0 0 3px $fhi-core-white inset !important;
        }

        &.bg-primary {
            background-color: $fhi-core-blue-3 !important; // BS override
        }
    }

    .ngb-dp-today > [ngbDatepickerDayView].btn-light {
        box-shadow: 0 0 0 1px $fhi-core-blue-3 inset;
    }
}