.tp__mapper-script {
  display: flex;
  flex-flow: column;
  overflow: auto; pointer-events: auto;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;

  .tp__mapper-script__code {
    font-family: monospace;
    background: var(--mapper-script-background-color);
    color: var(--modest-text-color);
    padding: var(--padding-default);
    border-radius: var(--border-radius);
    white-space: pre;

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

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

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

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

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

    .num-literal {
      color: var(--code-num-literal-color);
    }


    .built-in-function {
      color: var(--code-built-in-function-color);
    }

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

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

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

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

  .bracket {
      font-weight: bold;
      font-size: var(--font-size-md);
  }

  .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__mapper-script__inline {
  .tp__mapper-script__code {
     padding: 0;
     margin-block: 0;
  }
}