@use "../../../styles/variables" as vars;
@use "../../../styles/colors" as colors;
@use "../../../styles/fonts" as fonts;
@use "../../../styles/screen" as screen;

.flight-details {
  &--error,
  &--not-found {
    padding: vars.$space-xl;
    text-align: center;
  }

  &__status {
    padding: vars.$space-m vars.$space-xl;
  }

  &__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: vars.$space-xl;
  }

  &__flight-number {
    font-size: fonts.$font-size-xl2;
    margin: 0;
  }

  &__overall-status {
    font-weight: fonts.$font-medium;
  }

  &__operating {
    padding: 0 vars.$space-xl vars.$space-xl;
    color: colors.$light-gray;
  }

  &__flying-time {
    padding: vars.$space-xl;
    color: colors.$light-gray;
  }

  &__legs {
    padding: 0 vars.$space-xl;
  }

  &__leg {
    padding: vars.$space-xl 0;

    &:not(:last-child) {
      border-bottom: 1px dashed colors.$border;
    }
  }

  &__leg-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: vars.$space-m;
  }

  &__leg-index {
    font-weight: fonts.$font-medium;
  }

  &__leg-stations {
    display: flex;
    justify-content: space-between;

    @include screen.mobile {
      flex-direction: column;
      gap: vars.$space-xl;
    }
  }

  &__leg-departure,
  &__leg-arrival {
    display: flex;
    flex-direction: column;
    gap: vars.$space-s;
  }

  &__leg-duration {
    display: flex;
    align-items: center;
    color: colors.$light-gray;
  }

  &__station-code {
    font-size: fonts.$font-size-xl;
    font-weight: fonts.$font-medium;
  }

  &__station-name,
  &__station-city {
    color: colors.$light-gray;
    font-size: fonts.$font-size-s;
  }

  &__terminal,
  &__gate,
  &__bag-belt {
    font-size: fonts.$font-size-s;
    color: colors.$light-gray;
  }

  &__time {
    font-size: fonts.$font-size-l;
  }

  &__time-actual {
    font-size: fonts.$font-size-s;
    color: colors.$orange;
  }

  &__aircraft {
    margin-top: vars.$space-m;
    color: colors.$light-gray;
    font-size: fonts.$font-size-s;
  }

  // Angular overrides ported (without ::ng-deep)
  .flight-props-caption {
    width: 30%;
  }

  .flight-details-section__caption {
    width: calc(30% - #{vars.$space-xl});
  }

  .board-details-day-selector {
    @include screen.mobile {
      display: flex;
      flex-direction: column;
      padding: vars.$space-xl;
    }
  }
}
