@import "../../../assets/scss/variables";

.status-filter {
  display: inline-flex;
  height: 27px;
  font-weight: bold;
  border: 1px dashed #A2A2A2;
  cursor: pointer;

  .count {
    flex: 0 0 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #A2A2A2;
    width: 24px;
    margin: -1px;
    font-size: 1.1rem;
    border: 1px solid #A2A2A2;
    background-color: white;
  }

  .status {
    font-size: 1.1rem;
    flex: 1 0 auto;
    padding: 0 10px;
    color: #A2A2A2;
    display: flex;
    align-items: center;
    white-space: nowrap;
  }


  &.pending {
    order: 0;


    &.selected {
      .count {
        background-color: $status-pending;
        border-color: $status-pending;
        color: white;
      }

      .status {
        color: $main-color;
      }
    }
  }

  &.success {
    order: 10;
    // pointer-events: none;
    &.selected {
      .count {
        background-color: $status-success;
        border-color: $status-success;
        color: white;
      }

      .status {
        color: $main-color;
      }

    }
  }

  &.warning {
    order: 20;

    &.selected {
      .count {
        background-color: $status-warning;
        border-color: $status-warning;
        color: white;
      }

      .status {
        color: $main-color;
      }
    }
  }

  &.inactive {
    order: 30;

    &.selected {
      .count {
        background-color: $status-inactive;
        border-color: $status-inactive;
        color: white;
      }

      .status {
        color: $main-color;
      }
    }
  }

  &.completed {
    order: 30;

    &.selected {
      .count {
        background-color: $status-completed;
        border-color: $status-completed;
        color: white;
      }

      .status {
        color: $main-color;
      }
    }
  }

  &.error {
    order: 40;

    &.selected {
      .count {
        background-color: $status-error;
        border-color: $status-error;
        color: white;
      }

      .status {
        color: $main-color;
      }
    }
  }
}
.no-entries {
 pointer-events: none;
 .count {
   background-color: white !important;
   border-color: #A2A2A2 !important;
   color: #A2A2A2 !important;
 }
 .status {
   color: #A2A2A2 !important;
 }
}