.form-files {
  /** Required arguments with purportedly ridiculous defaults */
  --element-spacing: 200px;
  --element-color-active: red;
  --element-font-icon: italic bold 200px "Comic Sans MS";

  container-type: inline-size;
  container-name: table-in-form;
  overflow-x: auto;
  white-space: nowrap;

  @container table-in-form (min-width: 0) {
    > table {
      width: 100cqw;
    }
  }

  > table {
    border-collapse: collapse;

    > tbody {
      > tr {
        > th,
        > td {
          padding: 0;
          margin: 0;
        }

        > td {
          padding-left: var(--element-spacing);
          width: 100%;

          > code {
            cursor: pointer;
            white-space: nowrap;
            visibility: hidden;

            &:after {
              content: '📋';
              font: var(--element-font-icon);
            }

            &:active {
              color: var(--element-color-active);
            }
          }
        }

        &:not(:first-child) {
          > th,
          > td {
            padding-top: var(--element-spacing);
          }
        }

        &:not(:has(> th > input[type=file][data-has-value=true])) {
          &:not(:first-of-type) {
            display: none;
          }
        }

        &:has(> th > input[type=file][data-has-value=true]) {
          &, & + *:not(:first-of-type) {
            display: table-row;
          }

          > td > code {
            visibility: visible;
          }
        }
      }
    }
  }
}