How to change the style of a Lit Element when a certain event is triggered?

(New to the Lit element environment, so apologies for the naive question)

Code Summary

The code below is a File Uploader web component made using Lit Element. When the File is selected, the _inputHandler function validates the file, and if valid, enables/triggers the upload functionality to the server side.

Question

How to set the #cancel-btn css styling to visibility:visible when the input file is selected?

(By default/when page loaded) As long as no file is selectedthe cancel button remains hidden.

The moment a valid file is selected, the Cancel button should Appear(visibility: visible or something)

The complete code for Uploader.ts :

import { html, LitElement, css } from "lit";
import { customElement, property, query } from "lit/decorators.js";

import { styles } from "./Style.Uploader.js";

@customElement("file-uploader")
export class Uploader extends LitElement {
  // CSS Styling
  static get styles() {
    return styles;
  }

  // Properties
  @property()
  fileName = `Accepted File Types : ${getValidFileTypes().toString()}`;

  @property() fileType = "";

  @property() fileSizeInKB: Number = 0;

  private files: FileList | null = null;

  // Actual html elements Rendered

  render() {
    return html`
      <section>
        <form action="" autocomplete="off" enctype="multipart/form-data">
          <h3>Upload your File</h3>
          <div class="box" id="box">
            <input
              type="file"
              name="uploadedFile"
              id="input-box"
              class="input-box"
              style="display: none"
              @change="${this._inputHandler}"
            />
            <label for="input-box" class="input-label" id="input-label">
              ${this.fileName}
            </label>
          </div>

          <div class="buttons">
            <button
              class="upload-btn"
              id="upload-btn"
              @click="${this._uploadHandler}"
            >
              <span class="upload-btn-span" id="upload-btn-span">
                &#8682; Upload
              </span>
              <span class="uploading-span" id="uploading-span">
                Uploading...
              </span>
            </button>

            <button
              class="cancel-btn"
              id="cancel-btn"
              @click="${this._cancelHandler}"
            >
              Cancel
            </button>
          </div>

        </form>
      </section>
    `;
  }

  @query("upload-btn") uploadButton!: HTMLButtonElement;

  get cancelButton() {
    return this.querySelector("#cancel-btn"); // ?? null
  }

  // @query("cancel-btn") cancelButton!: HTMLButtonElement;

  private async _inputHandler(e: Event) {
    const input = e.target as HTMLInputElement;

    // array of files selected to upload
    this.files = input.files;

    if (!(this.files && this.files[0])) {
      return;
    } else {
      const uploadedFileSize = this.files[0]?.size;
      const uploadedFileName = this.files[0]?.name;

      const uploadedFileType =
        FileExtensionService.getFileExtension(uploadedFileName);


      // Trying to Change the visibility of the Cancel button to visible
      this.cancelButton!.style.visibility = "visible";

      // Validating file size and file type
      const validFileSize = await validateFileSize(uploadedFileSize);
      const validFileType = await validateFileType(uploadedFileType);
      if (!validFileSize.isValid) {
          ...
      }
    }
  }

  /**
   *
   * @returns
   */
  private _cancelHandler(e: Event) {
    e.preventDefault();
    this.files = null;
    this.fileName = "";
    this.fileType = "";
    this.fileSizeInKB = 0;
    this.requestUpdate();
  }
}

I am trying to change the style of the button(Which i suppose i can grab with a getter or through @query) but getting an Error: Property 'style' does not exist on type 'Element'.ts(2339) for: this.cancelButton!.**style**.visibility = "visible";