@use './src/styles/screen' as *;
@use './src/styles/variables' 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:
                'number number . logo logo logo'
                'depart-at depart-at time time arrive-at arrive-at'
                'depart-from depart-from depart-from arrive-to arrive-to arrive-to';

            &-number {
                grid-area: number;
            }

            &-time {
                grid-area: time;
            }
            .operator-logos {
                grid-area: logo;
                justify-self: end;
            }

            .arrow-icon {
                display: none;
            }
        }

        .schedule-flight-header {
            &__departure-time {
                grid-area: depart-at;
            }

            &__arrival-time {
                grid-area: arrive-at;
                justify-self: flex-end;
            }

            &__departure-station {
                grid-area: depart-from;
            }

            &__arrival-station {
                grid-area: arrive-to;
            }
        }
    }
}
