@mixin left-accordeon {
    section.frame {
        background-color: $blue-extra-light;
    }

    .p-accordion {
        p-accordiontab {
            // Header
            .p-accordion-header {
                border-radius: 0;
                margin: 0;

                a {
                    background-color: transparent;
                    border: none;
                    color: $blue;
                    border-radius: 0;
                    padding: 0 $space-l 0 $space-xl;
                    height: $button-height;
                    display: flex;
                    align-items: center;
                    font-weight: $font-bold;

                    p-header {
                        width: 100%;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                    }
                }

                // Active header
                &:not(.p-state-disabled).p-highlight {
                    a {
                        background-color: $white;
                        border: none;
                        color: $text-color;
                    }

                    border-bottom: none;
                }
            }

            // Content
            .p-accordion-content {
                border-bottom: 1px solid $border;
                @include box-shadow-small;
                padding: $space-s $space-xl $space-xl $space-xl;
            }

            // First tab
            &:first-child {
                .p-accordion-header {
                    a {
                        border-radius: 3px 3px 0 0;
                    }
                }
            }

            // Not last tab
            &:not(:nth-last-child(1)) {
                .p-accordion-header {
                    border-bottom: 1px solid $border;
                }
            }

            // Last tab
            &:nth-last-child(1) {
                .p-accordion-content {
                    border-radius: 0 0 3px 3px;
                    border: none;
                }
            }
        }
    }

    .label--filter {
        display: block;
        margin-right: $space-xl;
        @include font-overflow();
        @include font-small($gray);
        margin-bottom: $label-margin-bottom;
    }

    .number-input-composite {
        @include flex-center-align();

        .prefix {
            @include custom-input();
            border-right: none;
            border-radius: $border-radius 0 0 $border-radius;
            color: $gray;
        }
    }

    .input {
        &--filter {
            @include custom-input();
            padding-left: $space-m !important;
            width: 100%;
        }

        &--flight-number {
            display: block !important;
            border-left: 1px dotted $border-input;
            border-radius: 0 $border-radius $border-radius 0;
        }

        &--calendar {
            padding-right: 32px;
            background-image: url('~src/assets/img/calendar.svg');
            background-repeat: no-repeat;
            background-size: 16px 16px;
            background-position: right 8px center;
            cursor: pointer;
        }
    }

    .p-autocomplete-input {
        @include custom-input();
        width: 100%;
        height: $standard-button-height - 2px;
        padding-left: $space-m !important;
    }

    .calendar {
        margin-top: $space-xl;

        .calendar-controls-container {
            display: flex;
            flex-direction: column;
            cursor: pointer;

            position: relative;

            .button-clear {
                top: 1px !important;
                bottom: 1px !important;
                border-right: 1px solid $border-input;
            }

            .calendar-control-hidden {
                padding: 0;
                height: 0;
                display: flex;

                .p-inputtext {
                    padding: 0;
                    height: 0;
                    display: none;
                    z-index: 10;
                }

                .p-datepicker {
                    @include control-border-shadow();
                    top: $space-s !important;
                }
            }

            &.has-value {
                .button-clear {
                    display: block;
                }
            }
        }
    }

    .change-container {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;

        .button-change {
            margin-top: $space-m;
            margin-bottom: -$space-m;
            display: inline-flex;
            height: $medium-button-height;
            width: 35px;
            background-color: $white;
            @include control-border-shadow();
            display: flex;
            align-items: center;
            justify-content: center;

            border: none;
            box-shadow: none;

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

            &:hover {
                background-color: $white;
            }
        }
    }

    .search-button {
        margin-top: $space-xl;
        width: 100%;
        height: $standard-button-height;

        span {
            font-weight: $font-bold;
            font-size: $font-size-m;
        }
    }
}

.error-value {
    border-color: red;
    border-style: solid;
    border-width: 1px;
}

online-board-filter,
schedule-filter,
flights-map-filter {
    @include left-accordeon;
}

schedule-filter,
flights-map-filter {
    .p-accordion-header {
        display: none;
    }

    .p-accordion-content {
        border-radius: $border-radius !important;
        padding: $space-xl !important;
    }
}

@import '~src/styles/pages/adaptive/_page-filters-adaptive.scss';
@import '~src/styles/pages/adaptive/fligjts-map-filters-adaptive.scss';