.h-filter {
    position: relative;
}

.h-filter-row {
    padding: 0.5rem 0 0.5rem 0;
    position: relative;
    flex-wrap: unset;
    display: flex;
    gap: 10px;

    &:first-child {
        padding-top: 0
    }

    &:hover {
        .h-filter-add-input, .h-filter-remove-input {
            display: block;
        }
    }

    input, select:not(.h-filter-operator), .form-control {
        min-width: 200px;
    }
}

.h-filter-operator {
    width: 62px;
}

.h-filter-conditional {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;

    select {
        width: 50px;
    }

    &::before {
        content: '';
        position: absolute;
        top: calc(50% - 1px);
        left: 0;
        width: calc(50% - 35px);
        height: 1px;
        background: var(--bs-border-color-translucent);
    }

    &::after {
        content: '';
        position: absolute;
        top: calc(50% - 1px);
        left: calc(50% + 35px);
        width: calc(50% - 35px);
        height: 1px;
        background: var(--bs-border-color-translucent);
    }
}

.h-filter-remove {
    border-left: 1px solid var(--bs-gray-300);
    padding-left: 8px;
    margin-left: 2px;

    i::before {
        font-size: 0.8em;
    }
}

.h-filter-add-input {
    position: absolute !important;
    top: calc(100% - 12px);
    left: calc(50% - 17px);
    z-index: 9;
    display: none;
}

.h-filter-remove-input {
    position: absolute !important;
    top: calc(50% - 15px);
    left: calc(100% - 4px);
    z-index: 9;
    display: none;
}

.h-filter-popup {
  padding: 10px;
  background: var(--bs-white);
  z-index: 1070;
  font-size: var(--bs-popover-font-size);
  word-wrap: break-word;
  background-color: var(--bs-body-bg);
  background-clip: padding-box;
  border-radius: var(--bs-popover-border-radius);
  box-shadow: 0 .5rem 1rem rgba(var(--bs-body-color-rgb), .15);
  border: var(--bs-border-width) solid var(--bs-border-color-translucent);
  position: absolute;
  left: 50%; 
  transform: translateX(-50%);
  top: calc(100% + 3px);
  min-width: 250;

  &.closed {
    display: none;
  }
}