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

.flight-card {
  display: flex;
  align-items: center;
  padding: vars.$space-xl 0;
  margin: 0 vars.$space-xl;
  justify-content: space-between;

  & + & {
    border-top: 1px dashed colors.$border;
  }

  &__number {
    width: vars.$width-flight-number;
    font-weight: fonts.$font-medium;
  }

  &__route {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
  }

  &__departure,
  &__arrival {
    display: flex;
    align-items: center;
    gap: vars.$space-m;
    width: vars.$width-dep-arr;
  }

  &__duration {
    width: vars.$width-flight-time;
    text-align: center;
  }

  &__status {
    width: vars.$status-width;
    text-align: right;
  }

  @include screen.mobile {
    flex-direction: column;
    align-items: flex-start;
    gap: vars.$space-m;

    &__route {
      flex-direction: column;
      gap: vars.$space-m;
      width: 100%;
    }

    &__departure,
    &__arrival {
      width: 100%;
    }

    &__status {
      width: 100%;
      text-align: left;
    }
  }
}
