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

:host {
    display: block;
    padding: $space-xl;
    @include v-spacing($space-xl);

    &:hover {
        .arrow-icon {
            display: initial;
        }
    }

    .arrow-icon {
        position: absolute;
        right: 20px;

        display: none;
    }

    .arrow-icon--visible {
        display: initial;
    }

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

        &-number {
            font-size: $font-size-xl;
            font-weight: $font-regular;
        }

        .operator-logos {
            @include h-spacing($space-m);
            display: flex;

            operator-logo-and-model {
                max-width: 100%;
            }
        }

        &-time {
            @include font-small();
            display: flex;
            align-items: center;
            justify-content: center;

            .time {
                background-position: center top;
                background-repeat: no-repeat;
                background-image: url('~src/assets/img/time-blue.svg');
                white-space: nowrap;
                display: flex;
                align-items: flex-end;
                height: $small-button-height;
            }
        }
    }

    .transfer-container {
        display: flex;
        @include desktop() {
            margin-left: 80px + 120px + 2 * $space-xl;
        }
    }
}
