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

:host {
    display: block;
    padding: $space-l $space-xl;
    font-size: $font-size-xl;
    font-weight: $font-regular;
    @include v-spacing($space-l);

    .k-leg {
        display: grid;
        grid-template: auto / [number] 30px [flight-number] 80px [logo] 120px [departure-time] 70px [departure-station] minmax(45px, 240px) [duration] 100px [arrival-time] 70px [arrival-station] minmax(45px, 240px);
        gap: 0 $space-l;

        &-duration {
            align-self: center;
            border-top: 1px solid $border;
            flex: 1;
            margin-top: $space-s;
            padding-top: $space-s;
            text-align: center;
        }
    }

    code-sharing {
        margin-left: 32px;
    }
}
