@use "src/styles/variables" as vars;
@use "src/styles/colors";
@use "src/styles/layouts";

.flight-status {
  &__content {
    display: flex;
    align-items: center;

    @include layouts.h-spacing(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 {
      background-color: colors.$red;
      border-color: colors.$red;
    }

    &--InProgress {
      background-color: colors.$green;
      border-color: colors.$green;
    }
  }
}
