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

:host {
    @include mobile() {
        .flight {
            grid-template: auto auto auto / 1fr 1fr 1fr 1fr 1fr 1fr;
            gap: $space-l 0;
            grid-template-areas:
                'logo logo status status number number'
                'depart-at depart-at depart-at arrive-at arrive-at arrive-at'
                'depart-from depart-from depart-from arrive-to arrive-to arrive-to';

            operator-logo {
                grid-area: logo;
            }

            &-status {
                grid-area: status;
                .status {
                    display: none;
                }
            }

            .flight-number {
                grid-area: number;
                justify-self: end;
                .status {
                    display: block;
                }

                div {
                    text-align: right;
                }
            }

            time-group {
                &:first-of-type {
                    grid-area: depart-at;
                }
                &:last-of-type {
                    grid-area: arrive-at;
                    justify-self: end;
                    text-align: right;
                    margin-right: 0;
                }
            }

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

            .arrow-icon {
                display: none;
            }
        }

        .icons-row {
            flex-wrap: wrap;
            @include v-spacing($space-m);

            transfer-inline {
                flex: 100%;
            }
        }
    }
}
