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

@mixin column-layout() {
    flex-direction: column;
    align-items: flex-start;

    @include h-spacing(0);
    @include v-spacing($space-s2);
}

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

    &__event {
        display: flex;
        align-items: center;

        height: 28px;
        padding: 0 $space-m;

        border-radius: $border-radius;
        border: 1px solid $border;

        @include h-spacing($space-m);
    }

    &__event-description {
        font-size: $font-size-s;
        line-height: 16px;
        color: $gray;
    }

    &--column {
        @include column-layout;
    }

    &--column-mobile {
        @include mobile {
            @include column-layout;
        }
    }

    &--row-mobile {
        @include gt-mobile {
            @include column-layout;
        }
    }
}
