@use './src/styles/colors' as *;
@use './src/styles/variables' as *;
@use './src/styles/fonts' as *;
@use './src/styles/screen' as *;
@use './src/styles/layouts' as *;
@use './src/styles/screen' as *;

:host {
    background: $white;

    .multileg-flight-header {
        display: flex;

        &__bottom,
        &__top {
            display: flex;

            @include h-spacing($space-xl);
        }

        arrow-down-icon {
            position: absolute;
            right: 20px;
        }
    }

    .flight-route {
        margin-bottom: $space-xl;
        padding: $space-xl $space-xl 0 $space-xl;
        font-size: $font-size-xxl;

        display: grid;

        grid-template: auto auto auto/
            [depart-at] fit-content(120px)
            [depart-to] fit-content(30%)
            [status] minmax(150px, 1fr)
            [arrive-at] fit-content(120px)
            [arrive-to] fit-content(30%);
        grid-template-areas:
            '. . . . .'
            'scheduled-depart-at latest-depart-at . scheduled-arrive-at latest-arrive-at'
            'note note note note .';
        gap: $space-xl $space-m;

        time-group,
        captioned-time-group {
            font-size: initial;
        }

        note {
            grid-area: note;
        }

        captioned-time-group[role^='secondary'] {
            &[role*='scheduled departure'] {
                grid-area: scheduled-depart-at;
            }
            &[role*='latest departure'] {
                grid-area: latest-depart-at;
            }
            &[role*='scheduled arrival'] {
                grid-area: scheduled-arrive-at;
            }
            &[role*='latest arrival'] {
                grid-area: latest-arrive-at;
            }
        }

        &__departure,
        &__arrival {
            max-width: 260px;
        }
    }

    .details-accordion__header {
        justify-content: space-between;
        .block-route-update {
            flex: 1;

            .block-route {
                margin-right: $space-m;
            }
        }
    }

    leg-time-pair {
        font-size: $font-size-l;
    }

    flight-events {
        flex: 1;
    }
}
