@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 *;

:host {
    @include mobile() {
        .multileg-flight-header {
            position: relative;

            display: flex;
            flex-direction: column !important;

            &__bottom,
            &__top {
                width: 100%;

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

            &__top {
                margin-bottom: $space-s;
            }

            &__logo {
                order: 2;

                margin-right: 0;
            }

            &__events {
                order: 1;
                flex-grow: 0;

                margin-right: $space-m;
            }
        }

        .flight-route {
            margin-bottom: $space-m;
            font-size: $font-size-xl3;
            grid-template: auto auto auto auto auto / 100px auto;
            grid-template-areas:
                'depart-at depart-from'
                'scheduled-depart-at latest-depart-at'
                'status status'
                'arrive-at arrive-to'
                'scheduled-arrive-at latest-arrive-at'
                'note note';

            time-group[role^='primary'] {
                &:first-of-type {
                    grid-area: depart-at;
                }
                &:last-of-type {
                    grid-area: arrive-at;
                }
            }

            captioned-time-group[role^='secondary'] {
                &[role*='latest'] {
                    justify-self: end;
                }
            }

            route-status {
                grid-area: status;
            }

            station {
                &:first-of-type {
                    grid-area: depart-from;
                }
                &:last-of-type {
                    grid-area: arrive-to;
                }
            }
        }
    }
}
