src/components/FormulaBar/FormulaBar.scss
.FormulaBar {
  display: flex;
  border: 1px solid var(--gray-5);
  background-color: var(--gray-2);
  padding: 8px;
  gap: 8px;
  border-bottom: 1px solid #e0e0e0;
  position: relative;

  .RangeInput {
    padding: 6px 8px;

    &:focus-visible {
      outline: var(--focus-visible-outline) !important;
    }
  }

  .Formula {
    display: flex;
    align-items: center;
    flex-grow: 1;
    height: 32px;
    position: relative;
    border: 1px solid var(--border);
    border-radius: 4px;
    background-color: var(--component-background);
    padding-inline-start: 30px;

    .FormulaInput {
      position: relative;
      z-index: 1;
      flex-grow: 1;
      width: 100%;
      padding: 6px 8px;
      border: none;
      outline: none;
      font-size: 14px;
      background-color: transparent;

      &.hasFormula {
        color: transparent;
        caret-color: var(--gray-13);
      }
    }

    .FormulaOverlay {
      // padding-inline-start of .Formula + padding-inline-start of .FormulaInput
      transform: translateX(30px + 8px);
      transform-origin: left top;
    }

    &.readOnly {
      border-color: var(--lighter-border);
    }

    &:focus-within {
      outline: var(--focus-visible-outline) !important;
    }

    .FormulaInputMask {
      position: absolute;
      inset-block-start: 0px;
      padding: 6px 8px;
      color: transparent;
      pointer-events: none;
      white-space: pre-wrap;
      width: 100%;
      padding-inline-start: 8px;
      font-size: 14px;
      z-index: 0;
    }
  }

  .FormulaIcon {
    position: absolute;
    inset-inline-start: 8px;

    &.readOnly {
      color: var(--disabled-icon);
    }
  }

  .FormulaInput {
    flex-grow: 1;
    width: 100%;
    padding: 6px 8px;
    border: none;
    outline: none;
    background-color: transparent;
  }
}
