.cm-filters-v2 {
  padding: 16px 24px;
  background-color: transparent;
  z-index: 1;
  &__inner {
    @include flex(row, flex-start, center, wrap);
    gap: 8px;
    .filter-chips-wrapper {
      .filter-chip {
        margin-left: 16px;
      }
    }
    .add-filter-btn {
      @include font($size: $t4-text, $color: $primary-text-clr, $weight: 600);
      line-height: 22px;
      cursor: pointer;
      span {
        margin-right: 4px;
      }
      &:hover {
        color: $brand-color;
      }
    }
    .clear-btn {
      position: relative;
      @include font($size: $t4-text, $color: $ink-lighter-clr, $weight: 600);
      line-height: 22px;
      margin-left: 32px;
      cursor: pointer;
      &::before {
        content: "";
        position: absolute;
        top: -5px;
        left: -16px;
        height: 32px;
        border-left: 1px solid $grey-regular-clr;
      }
      &:hover {
        color: $primary-text-clr;
      }
    }
  }
}

.cm-filters {
  @include flex(row, space-between, flex-start, nowrap);
  position: fixed;
  top: 140px;
  width: 100%;
  min-height: 60px;
  padding: 10px 20px;
  background-color: $white;
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.06);
  z-index: 1;
  @media screen and (max-width: 1280px) {
    flex-wrap: wrap;
  }
  &__lhs {
    @include flex(row, flex-start, center, wrap);
    width: 75%;
    .filter-field {
      position: relative;
      width: 250px;
      margin: 4px 10px 4px 0;
      align-self: center;
      @media screen and (max-width: 1280px) {
        margin-bottom: 10px;
      }

      //input-styles
      input {
        width: 100%;
        height: 39px;
        border: 1px solid $grey-regular-clr;
        border-radius: $radius-4;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        &:focus {
          border-color: $brand-color !important;
          outline: 0 !important;
          box-shadow:
            inset 0 1px 1px rgba(0, 0, 0, 0.075),
            0 0 8px rgba(102, 175, 233, 0.6) !important;
        }
      }

      //select2 styles
      .select2 {
        width: 100% !important;
        .selection {
          //single-select-styles
          .select2-selection--single {
            height: 39px;
            border: 1px solid $grey-regular-clr;
            border-radius: $radius-4;
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
            &:focus {
              border-color: $brand-color;
              outline: 0;
              box-shadow:
                inset 0 1px 1px rgba(0, 0, 0, 0.075),
                0 0 8px rgba(102, 175, 233, 0.6);
            }
            .select2-selection__rendered {
              color: #555555;
              line-height: 36px;
              .select2-search--inline {
                .select2-search__field {
                  height: 26px !important;
                }
              }
            }
            .select2-selection__arrow {
              top: 7px;
              b {
                border-color: $brand-color transparent transparent transparent;
              }
            }
          }
          //multi-select-styles
          .select2-selection--multiple {
            max-height: 39px;
            border: 1px solid $grey-regular-clr;
            border-radius: $radius-4;
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
            overflow-y: auto;
            .select2-selection__rendered {
              .select2-search--inline {
                .select2-search__field {
                  height: 26px !important;
                  border: none;
                }
              }
            }
          }
        }
      }

      //single-select-arrow-styles
      .select2-container--open {
        .selection {
          .select2-selection--single {
            .select2-selection__arrow {
              top: 7px;
              b {
                border-color: transparent transparent $brand-color transparent;
              }
            }
          }
        }
      }

      .filter-rangepicker {
        padding: 6px 12px;
        color: $primary-text-clr;
        font-size: $t3-text;
      }

      .field-area {
        display: block;
        padding: 6px 12px;
        font-size: $t3-text;
        color: #555555;
      }
      .search-icon {
        position: absolute;
        top: 10px;
        right: 15px;
        color: $brand-color;
      }
      .down-arrow-icon {
        position: absolute;
        top: 10px;
        right: 15px;
        font-size: $t1-text;
        color: $brand-color;
      }
    }
  }
  &__rhs {
    width: 25%;
    text-align: right;
    .filter-btn {
      padding: 5px 10px;
      @include font($size: $t3-text, $color: $white);
      background-color: $brand-color;
      border: none;
      border-radius: $radius-4;
      transition: all 0.2s linear;
      &:hover {
        transform: scale(1.2);
      }
      span {
        margin-right: 5px;
      }
    }
  }
}

//TODO: Fixing the filter search height by overriding. But this needs to be fixed on auth. The auth .form-control class styles causing this issue
.filter-search {
  input {
    height: 31px;
  }
}

.sort-button {
  @extend .btn, .btn-outline-dark, .btn-sm, .d-flex;
  gap: 4px;
}

.sort-menu {
  padding: 0;
  &__top {
    @extend .p-3, .d-flex, .flex-column, .gap-3;
  }
  &__bottom {
    @extend .d-flex, .px-3, .py-2, .bg-light, .rounded-2;
    justify-content: center;
    align-items: center;
    button {
      width: 100%;
    }
  }
}