@use './src/styles/framework' as *;

:host {
    &.selected {
        .flight-card {
            border: 2px solid $blue-light;
        }

        .flight-card-wrapper {
            border: none;
        }
    }

    time-group-legacy {
        font-size: $font-size-xl1;
        font-weight: $font-medium;
        color: $blue-dark;
    }

    .flight-card-wrapper {
        padding: 0 $space-s2;
        border-bottom: 1px solid $border;
    }

    &:last-of-type .flight-card-wrapper {
        border: none;
    }

    .flight-card {
        padding: $space-m2;

        &__content {
            display: grid;
            column-gap: $space-s;
            row-gap: $space-m;
            grid-template: auto auto / 1fr $space-m $space-m 1fr;
            grid-template-areas:
                'depart-at status status arrive-at'
                'depart-from depart-from arrive-to arrive-to';
        }

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

            &:last-of-type {
                grid-area: arrive-at;
                justify-self: end;
                text-align: right;
            }
        }

        flight-status-icon {
            grid-area: status;
            justify-self: center;
        }

        station {
            max-width: 100%;
            &:first-of-type {
                grid-area: depart-from;
            }

            &:last-of-type {
                grid-area: arrive-to;
                justify-self: end;
                text-align: right;
            }
        }

        &__flight-number {
            margin-bottom: 2px;

            font-size: $font-size-xs;
            line-height: 13px;
            color: $gray;
        }

        &__station {
            font-size: $font-size-s;
            font-weight: $font-bold;
            color: $blue-dark;
        }
    }
}
