// Filter-panel calendars (OnlineBoard / Schedule / FlightsMap sidebars):
// Angular renders the date input + calendar-trigger icon inside a single
// bordered pill — no internal seam between the input and the button. In
// React PrimeReact's default p-calendar-w-btn gives the input its own
// border and leaves the trigger borderless, which surfaces the seam.
// Promote the border to the outer wrapper and strip the inner input's
// border + shadow so the filter calendar looks like a single control.
.online-board-filter .p-calendar,
.schedule-filter .p-calendar,
.schedule-start__form .p-calendar,
.flights-map-filter .p-calendar {
    @include control-border-shadow();
    display: flex;
    flex-direction: row;
    align-items: center;
    height: $standard-button-height;
    overflow: hidden;

    input.p-inputtext {
        border: none !important;
        box-shadow: none !important;
        background: transparent;
        flex: 1;
        height: 100%;
        padding: 0 $space-l;
    }

    // Swap PrimeReact's default filled-calendar glyph for the outlined
    // blue calendar used in Angular (`ClientApp/src/assets/img/calendar.svg`,
    // fill #418fde). Hide the <svg class="p-icon"> PrimeReact injects,
    // paint the sprite as a background-image on the trigger button.
    .p-datepicker-trigger {
        background: transparent url('/assets/img/calendar.svg') no-repeat center center;
        background-size: 16px 16px;
        border: none !important;
        box-shadow: none !important;

        .p-icon,
        .p-button-icon {
            display: none !important;
        }
    }

    &:focus-within {
        border-color: $blue-light;
        box-shadow: 0 0 0 0.2em $focus-shadow;
    }
}

// Adapted from Angular p-calendar element selector to class-based selectors for PrimeReact
.p-calendar {
    cursor: pointer;

    .p-datepicker-header {
        .p-datepicker-prev {
            background-image: url('/assets/img/arrow-left.svg');
            background-position: center center;
            background-repeat: no-repeat;

            span {
                display: none;
            }
        }

        .p-datepicker-title {
            .p-datepicker-month,
            .p-datepicker-year {
                border: none;
                color: $blue;
                font-weight: $font-bold;
                -webkit-appearance: none;
                background: transparent !important;
            }

            .p-datepicker-year {
                margin-left: $space-m;
            }
        }

        .p-datepicker-next {
            background-image: url('/assets/img/arrow-right.svg');
            background-position: center center;
            background-repeat: no-repeat;

            span {
                display: none;
            }
        }

        .p-datepicker-prev,
        .p-datepicker-next {
            width: 1.8em;
            height: 1.8em;
        }
    }

    .p-datepicker-calendar-container {
        .p-datepicker-calendar {
            margin-top: $space-m;

            th {
                font-size: 10px;
                font-weight: $font-medium;
                padding: 2px;
                padding-bottom: $space-m;
                color: $gray;
            }

            td {
                padding: 2px;

                &.p-datepicker-today {
                    a,
                    span {
                        border: 1px solid $blue;
                        background-color: $white;

                        &:hover {
                            background-color: $blue-icon;
                        }

                        &.p-highlight {
                            background-color: $blue-icon;
                            color: $extra-blue;
                        }
                    }
                }

                a,
                span {
                    padding: 5px 6px;
                    font-size: 12px;
                    font-weight: $font-medium;
                    color: $extra-blue;

                    &.p-highlight {
                        background-color: $blue-icon;
                        color: $extra-blue;
                    }

                    &.p-highlight {
                        background-color: $white;
                    }

                    &:not(.p-highlight):hover {
                        background-color: $blue-icon;
                    }
                }

                span.p-disabled {
                    color: $gray;
                    opacity: 0.5;

                    &:hover {
                        background-color: transparent;
                    }
                }
            }
        }
    }
}

.calendar--mobile {
    display: none;

    @media (max-width: $media-breakpoint-mobile) {
        display: flex;
    }

    margin-bottom: $space-m;
    justify-content: space-between;

    .digit {
        width: 100%;
        @include control-border-shadow();
        display: flex;
        flex-direction: column;
        padding: $space-m;
        background-color: $white;
        @include font-overflow();

        &.selected {
            background-color: $blue-extra-light;
            border-color: $border-blue;

            &:focus,
            &:hover {
                background-color: $blue-extra-light !important;
                border-color: $border-blue !important;
            }
        }

        &:focus,
        &:hover {
            border: 1px solid $border-input !important;
            background-color: $white !important;
        }

        .p-button-label {
            display: none;
        }

        .date-day {
            display: flex;
            flex-direction: row;
            align-items: flex-end;

            .date {
                color: $text-color;
                font-size: $font-size-xl3;
            }

            .day {
                @include font-small();
                margin-bottom: $text-margin-bottom;
                margin-left: $space-s;
            }
        }

        .month {
            @include font-overflow();
            margin-top: $text-margin-bottom;
            @include font-small();
            width: 100%;
            text-align: left;
        }

        & + .digit {
            margin-left: $space-m;
        }
    }
}
