@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() {
        ::ng-deep {
            flight-actions {
                flight-status-button {
                    display: none;
                }
            }
        }

        .flight-route {
            font-size: $font-size-xl3;
            grid-template: auto auto auto / 100px auto;
            grid-template-areas:
                'depart-at depart-from'
                'status status'
                'arrive-at arrive-to';

            time-group-legacy {
                &:first-of-type {
                    grid-area: depart-at;
                }
                &:last-of-type {
                    grid-area: arrive-at;
                }
            }

            .status-line {
                grid-area: status;
            }

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