.app-text-area {
  display: flex;
  width: 100%;
  height: 100%;
  box-sizing: border-box;

  &__input {
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: var(--spacing-200);
    border: 0;
    outline: 0;
    resize: none;
    background: transparent;
    @include body-medium-1;
    font-family: var(--font-family);
  }

  &--numbered {
    font-family: monospace;

    .app-text-area__gutter,
    .app-text-area__input {
      @include body-medium-1;
      font-family: monospace;
      line-height: 150%;
    }

    .app-text-area__gutter {
      flex-shrink: 0;
      overflow: hidden;
      padding: var(--spacing-200);
      background-color: var(--layer-hover-2);
      text-align: right;
      user-select: none;
      color: var(--text-secondary);
    }

    .app-text-area__input {
      flex: 1;
      min-width: 0;
    }
  }
}