.tp__filter {
  display: flex;
  flex-flow: column;
  overflow: auto;

  .tp__filter__code {
    font-family: monospace;
    background: var(--code-editor-background-color);
    color: var(--code-editor-color);
    padding: 1rem;
    border-radius: 8px;
    white-space: pre;

    .binary_op-wrapper{
      white-space: pre;
    }
    
    .comparison {
      white-space: nowrap;
      overflow: hidden;
      color: var(--code-comparison-color);
      background-color: var(--code-comparison-background-color);
      padding: var(--padding-micro);
      border-radius: var(--border-radius);
    }

    .unary_op {
      font-weight: bold;
      color: var(--code-op-color);
      text-transform: uppercase;
    }

    .binary_op {
      font-weight: bold;
      color: var(--code-op-color);
      text-transform: uppercase;
    }

    .field {
      font-weight: bold;
      color: var(--code-field-color);
    }

    .regex {
      color: var(--code-regex-color);
      white-space: nowrap;
    }

    .enum {
      color: var(--code-enum-color);
    }
  }

  .bracket {
      font-weight: bold;
      font-size: 1.1rem;
  }

  .bracket-1 { color: var(--code-bracket-1-color); }
  .bracket-2 { color: var(--code-bracket-2-color); }
  .bracket-3 { color: var(--code-bracket-3-color); }
}
.tp__filter__inline {
  .tp__filter__code {
     padding: 0;
     margin-block: 0;
  }
}