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

.flight-status {
  &__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;
    }
  }
}
