@mixin status-colors($bg-color, $text-color) {
  background-color: $bg-color;
  color: $text-color;
}

.ff-status-button {
  border: none;
  border-radius: 4px;
  padding: 0 4px;
  cursor: pointer;
  width: 80px;
  height: 16px;

  &__text {
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 76px;
    text-transform: capitalize;
  }

  &--passed {
    @include status-colors(
      var(--status-button-bg-passed),
      var(--status-button-text-passed)
    );
  }

  &--failed {
    @include status-colors(
      var(--status-button-bg-failed),
      var(--status-button-text-failed)
    );
  }

  &--running {
    @include status-colors(
      var(--status-button-bg-running),
      var(--status-button-text-running)
    );
  }

  &--skipped {
    @include status-colors(
      var(--status-button-bg-skipped),
      var(--status-button-text-skipped)
    );
  }

  &--warning {
    @include status-colors(
      var(--status-button-bg-warning),
      var(--status-button-text-warning)
    );
  }

  &--terminated {
    @include status-colors(
      var(--status-button-bg-terminated),
      var(--status-button-text-terminated)
    );
  }

  &--partially-executed {
    @include status-colors(
      var(--status-button-bg-partiallyExecuted),
      var(--status-button-text-partiallyExecuted)
    );
  }

  &--aborted {
    @include status-colors(
      var(--status-button-bg-aborted),
      var(--status-button-text-aborted)
    );
  }

  &--not-executed {
    @include status-colors(
      var(--status-button-bg-notExecuted),
      var(--status-button-text-notExecuted)
    );
  }
  &--default {
    @include status-colors(
      var(--status-button-bg-default),
      var(--status-button-text-default)
    );
  }

  &:disabled {
    opacity: 50%;
    cursor: not-allowed;
  }
}