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

.flight-status {
  &--with-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
  }

  // Angular's SVG sprite points the plane nose to the right; the inline
  // 24×24 path in this component is nose-up, so rotate it 90° to match.
  &__plane {
    display: block;
    transform: rotate(90deg);
  }

  &__label {
    font-size: 12px;
    color: colors.$text-color;
    text-align: center;
    white-space: nowrap;
  }

  // Mirror the icon colour on the label (Angular's flight-status-colors
  // maps Sent/InFlight/Landed/Arrived/Unknown all to $green, Cancelled
  // to $red, Delayed to $orange, Scheduled to $blue).
  &--cancelled &__label { color: colors.$red; }
  &--arrived &__label,
  &--landed &__label,
  &--in-flight &__label,
  &--departed &__label { color: colors.$green; }
  &--delayed &__label { color: colors.$orange; }
  &--scheduled &__label { color: colors.$blue; }

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

    & > *:not(:last-child) {
      margin-right: vars.$space-s2;
    }
  }

  &__indicator {
    width: vars.$status-indicator-size;
    height: vars.$status-indicator-size;
    border-radius: 50%;
    display: inline-block;
    background-color: colors.$light-gray;
    border: 1px solid colors.$light-gray;

    &--Finished,
    &--arrived,
    &--landed,
    &--cancelled {
      background-color: colors.$red;
      border-color: colors.$red;
    }

    &--InProgress,
    &--in-flight,
    &--departed {
      background-color: colors.$green;
      border-color: colors.$green;
    }
  }
}