// $discard: #ff4949;
// $discard-bg: #ffdddd;
$new: #17a2b8;
$new-bg: #c8ecf0;
$active: #6cc212;
$active-bg: #e8ffd1fd;
// TODO styling for different statuses

.status {
  &:not(.box-card) {
    &.new {
      color: $new;
      background-color: $new-bg;
    }

    &.active {
      color: $active;
      background-color: $active-bg;
    }

    &.discard {
      color: $discard;
      background-color: $discard-bg;
    }
  }

  &.box-card {
    .el-card__header {
      color: white;
    }

    &.new > .el-card__header {
      background: $new;
    }

    &.active > .el-card__header {
      background: $active;
    }

    &.discard > .el-card__header {
      background: $discard;
    }
  }
}