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

.flight-props {
    display: flex;
    color: $text-color;
    font-weight: $font-medium;
    position: relative;

    &-caption {
        display: flex;
        flex-shrink: 0;

        @include h-spacing($space-xl);

        @include mobile() {
            flex: 100%;
            align-items: center;

            height: 24px;
        }
    }

    &-body {
        flex: 1;
        display: grid;

        column-gap: $space-l;
        row-gap: $space-l;

        @include mobile() {
            grid-template-columns: 3fr 2fr;

            margin-top: $space-xl;

            &:empty {
                margin-top: 0;
            }
        }

        @include tablets() {
            grid-template-columns: repeat(4, var(--property-column-width, 1fr));
        }

        @include desktop() {
            grid-template-columns: repeat(5, var(--property-column-width, 1fr));
        }
    }

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

    @include mobile() {
        flex-wrap: wrap;
    }

    time-note {
        grid-column-start: 1;
        grid-column-end: 3; // span for 2 columns
    }

    &.equal-columns {
        .flight-props-body {
            @include mobile() {
                grid-template-columns: 1fr 1fr;
            }
        }
    }

    arrow-down-icon {
        @include mobile {
            position: absolute;
            right: 20px;
        }
    }
}
