styles.scss

.filter-bar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  border-radius: 4px;

  .filter-block {
    display: inline-flex;
    align-items: center;
    border-radius: 4px;
    background-color: #e1edff;
    color: #074382;

    .filter-token, .del-btn {
      padding: 4px;
      position: relative;

      &:first-of-type {
        border-radius: 4px 0 0 4px;
      }

      &:last-of-type {
        border-radius: 0 4px 4px 0;
      }

      &:not(:first-child) {
        cursor: pointer;
      }

      &:not(:first-child):hover, &.is-editing {
        background-color: #a4d1fc;
      }
    }
  }

  .filter-conjunction {
    padding: 3px;
    cursor: pointer;
    position: relative;
    background-color: transparent;
    border: 1px solid #cdd3d5;
    border-radius: 4px;
  }

  .filter-entry {
    position: relative;
  }
}