$primary-blue: rgb(0, 117, 255);
$primary-blue-60: rgba(0, 117, 255, 0.60);
$primary-blue-50: rgba(0, 117, 255, 0.50);
$primary-blue-20: rgba(0, 117, 255, 0.20);
$primary-blue-10: rgba(0, 117, 255, 0.10);
$primary-blue-7: rgba(0, 117, 255, 0.07);
$primary-blue-2: rgba(0, 117, 255, 0.02);
$primary-dark: rgb(16, 38, 64);
$primary-dark-50: rgba(16, 38, 64, 0.5);
$primary-dark-30: rgba(16, 38, 64, 0.3);
$primary-dark-15: rgba(16, 38, 64, 0.15);
$primary-dark-10: rgba(16, 38, 64, 0.10);
$primary-dark-5: rgba(16, 38, 64, 0.05);
$error-red: rgb(233, 31, 79);
$error-red-50: rgba(233, 31, 79, 0.5);
$error-red-10: rgba(233, 31, 79, 0.10);
$secondary-purple: rgb(108, 25, 173);
$alert-yellow-50: rgba(255, 238, 88, 0.50);
$alert-yellow: rgb(255, 238, 88);
$benchmark-orange: rgb(245, 129, 21);
$benchmark-orange-50: rgba(245, 129, 21, 0.50);
$benchmark-orange-25: rgba(245, 129, 21, 0.25);
$action-green: rgb(158, 206, 56);
$action-green-50: rgba(158, 206, 56, 0.5);
$box-shadow: 5px 5px 30px 0 rgba(24, 45, 70, 0.05);
$background-color: #F6F9FB;

.search-filters .filters-loading,
#search-loading-dots-pill {
  display: inline-block;
  background: $secondary-purple;
  border-radius: var(--gh-border-radius);
  padding: 1px 5px;
  color: #FFFFFF;
}

.filter-placeholder {
  background: var(--gh-dark);
  opacity: 0.2;
  border-radius: var(--gh-border-radius);
}

.include-filters-wrap, .exclude-filters-wrap {
  border: 1px solid $secondary-purple;
  border-radius: var(--gh-panel-border-radius);
  padding: 20px 10px 10px 10px;
  position: relative;

  &:not(:last-child) {
    margin-bottom: 20px;
  }

  .include-block, .exclude-block {
    position: absolute;
    background: $secondary-purple;
    border-radius: var(--gh-border-radius);
    left: 10px;
    top: -10px;
    padding: 1px 5px;
    color: #FFFFFF;
  }
}

.search-filters {
  .filters-loading {
    display: inline-block;
    background: $secondary-purple;
    border-radius: var(--gh-border-radius);
    padding: 1px 5px;
    color: #FFFFFF;
  }
}

.filter-sub_query {
  .search-filters-editor {
    .group {
      flex-wrap: nowrap !important;

      .filter-view{
        white-space: nowrap !important;
      }
    }
  }
}

.search-filters-editor,
#search-filters-editor {

  display: flex;
  flex-direction: column;
  gap: 5px;

  .or-separator {
    /*border: 1px solid #cccccc;*/
    height: 1px;
    background: $secondary-purple;
    position: relative;
    margin: 15px 0;

    .or-circle {

      display: inline-block;
      position: absolute;
      background: $secondary-purple;
      border-radius: var(--gh-border-radius);
      left: 10px;
      top: -10px;
      padding: 1px 5px;
      color: #FFFFFF;
    }
  }

  .group {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 5px;
  }

  button {
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;

    &.add-filter {
      padding: 5px;
    }

    &.white {
      //padding: 5px 8px;
      background: #FFFFFF;
      border: 1px solid #8c8f94;
      border-radius: var(--gh-border-radius);
    }
  }

  .add-filter-wrap {
    position: relative;

    .add-filter {
      position: absolute;
      z-index: 999;
      border: 1px solid #8c8f94;
      display: flex;
      flex-direction: column;
      gap: 5px;
      background: #FFFFFF;
      border-radius: var(--gh-border-radius);
      box-shadow: 5px 5px 30px rgba(24, 45, 70, 0.05);

      &.mount-from-bottom {
        bottom: 0;
      }

      .header {
        padding: 5px;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #8c8f94;
        gap: 20px;
      }

      .filter-options {
        padding: 5px 8px;

        * {
          padding-top: 3px;
          padding-bottom: 3px;
        }

        .option-group {
          font-weight: 500;
        }

        .option {
          padding-left: 10px;
          cursor: pointer;

          &:hover {
            background: #0d79e5;
            color: #FFFFFF;
          }
        }
      }
    }
  }

  .filter {
    float: none;
    margin: 0;

    select {
      vertical-align: initial;

      &#filter-count-compare {
        width: fit-content;
      }
    }

    &.filter-view {
      padding: 5px 8px;
      background: #FFFFFF;
      border: 1px solid #8c8f94;
      border-radius: var(--gh-border-radius);
      cursor: pointer;
      display: flex;
      gap: 5px;
      align-items: center;

      &:hover,
      &:focus {
        background: #f9f9f9;
      }

      &.filter-broken{
        border-color: $error-red;
        background: $error-red-10;
      }



      .delete-filter{
        margin-right: -3px;

        &:hover{
          background: var(--gh-dark-5);
          border-radius: 3px;
        }
      }
    }

    &.filter-edit-wrap {
      position: relative;
      min-width: 200px;

      .filter-edit {
        min-width: 200px;
        border: 1px solid #8c8f94;
        padding: 10px;
        display: flex;
        flex-direction: column;
        gap: 5px;
        position: absolute;
        background: #FFFFFF;
        border-radius: var(--gh-border-radius);
        z-index: 999;
        box-shadow: 5px 5px 30px rgba(24, 45, 70, 0.05);

        .settings {
          display: flex;
          flex-direction: column;
          gap: 5px;

          .regular-text {
            width: auto;
          }
        }

        .actions, .header {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }

      }
    }
  }
}