@import '@project-one/components/lib/variables.scss';

.FlightInfo {
    color: $grey;

    .modal__body {
        animation: none;
        transition: none;
    }

    &-Scrollable {
        height: 100%;
        background-color: $white;
        --scrollable-header-height: 3.25rem;

        &_mobile {
            --scrollable-header-height: 2.75rem;
        }
    }

    &-Error {
        grid-column: 1 / -1;
    }

    &-FlightInfoTabs {
        grid-column: 1 / -1;
        margin-bottom: 0.25rem;
    }

    &-FlightInfoTab {
        text-transform: none;
    }

    &-Header {
        display: flex;
        align-items: center;
        padding: 0.5rem 1rem 0.25rem 0.5rem;
        border-bottom: 1px solid $grey10Clear;
        background-color: $white;

        &_mobile {
            padding: 0.75rem 0.75rem 0.5rem;
            border-bottom: none;
        }
    }

    &-BackButton {
        margin-right: 0.25rem;
    }

    &-Title {
        margin-right: auto;
    }

    &-Tag {
        padding: 0.25rem 0.75rem;
        border-radius: 0.75rem;
        margin-left: auto;
        background-color: $green10Clear;
        color: $darkGreen;

        &_archive {
            background-color: $primary10Clear;
            color: $grey;
        }
    }

    &-TagContent {
        position: relative;
        top: -1px;
    }

    &-Content {
        .Scrollable-Content {
            padding: 1rem;
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            grid-gap: 1rem 0.5rem;
        }

        &_mobile .Scrollable-Content {
            padding: 0.5rem 0.75rem 1rem;
            grid-gap: 0.5rem;
        }
    }

    &-Divider {
        height: 1px;
        background-color: $grey10Clear;
        grid-column: 1 / -1;
    }

    &-DataCellValue {
        margin-top: 0.25rem;
    }

    &-DataCell {
        &_fullWidth {
            grid-column: 1 / -1;
        }
    }

    &-DataCellLabel,
    &-DataCellValue_secondary {
        color: $grey50Clear;
    }

    &-Content_mobile &-DataCell:last-of-type {
        margin-bottom: 0.5rem;
    }

    &-Summary {
        grid-column: 1 / -1;
        font-style: italic;
        color: $grey70Clear;
        text-align: center;
    }

    &-Sensors {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-gap: 1rem 0.5rem;
        color: $grey;
    }
}