@import "../../../assets/scss/variables";
:root {

  --selected-count-border:none;
  --status-border:1px dashed #A2A2A2;
  --filter-bg:none;
  --count-margin:-1px;
}

:root[data-theme="dark"] {

  --selected-count-border:1px solid;
  --status-border:1px solid #20262E;
  --status-bg:#20262E;
  --count-margin:0;
}
.status-filter {
  $background-color-status-completed:var(--background-color-status-completed);
  $background-color-status-critical:var(--background-color-status-critical);
  $background-color-status-inactive:var(--background-color-status-inactive);
  $background-color-status-warning:var(--background-color-status-warning);
  $background-color-status-success:var(--background-color-status-success);
  $background-color-status-pending:var(--background-color-status-pending);
  $selected-count-border:var(--selected-count-border);
$status-border:var(--status-border);
$status-bg:var(--status-bg);
  $count-margin:var(--count-margin);

  display: inline-flex;
  height: 27px;
  font-weight: bold;
  border: $status-border;
  cursor: pointer;

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

  }

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



  &.selected{
    .count{
      border: $selected-count-border;
    }
  }

  &.pending {
    order: 0;


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

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

  &.success {
    order: 10;
    &.selected {
      .count {
        background-color: $background-color-status-success;
        border-color: $status-success;
        color: $white;
      }
      .status {
        color: $title-color;
      }

    }
  }

  &.warning {
    order: 20;

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

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

  &.inactive {
    order: 30;

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

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

  &.completed {
    order: 30;

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

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

  &.error {
    order: 40;

    &.selected {
      .count {
        background-color: $background-color-status-critical;
        border-color: #ee6969;
        color: $white;
      }

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

  &.critical {
    order: 50;

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

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

  &.success_completed {
    order: 25;

    &.selected {
      .count {
        background: $background-color-status-completed;
        background: linear-gradient(131deg, $background-color-status-completed 50%, $background-color-status-success 50%);
        color: $white;
      }

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

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