.param-file {
  .drop-zone {
    position: relative;
    // Setting margin-bottom is bad design: really, the fields _below_ ought to
    // set margin-top. TODO rethink margins on checkboxes.
    margin-bottom: 1rem;

    &.dragging-over * {
      // https://stackoverflow.com/questions/7110353/html5-dragleave-fired-when-hovering-a-child-element
      pointer-events: none;
    }

    &:not(.dragging-over) .drop-here {
      display: none;
    }

    .drop-here {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      overflow: hidden;
      border: 3px dotted $brand-orange;
      border-radius: 5px;
      background-color: $brand-orange--light;
      // Center contents
      display: flex;
      justify-content: center;
      align-items: center;

      // Style big font
      @include title-2;
      color: $brand-orange;

      * {
        // drag-and-drop is very finicky....
        // When the user hovers with a file, we show .drop-here. We want to
        // _hide_ .drop-here when the user leaves. However, `.drag-leave`
        // bubbles so
        pointer-events: none;
      }

      p {
        margin: 0 auto;
      }
    }
  }

  p.file-select-button {
    // Shared properties that appear on "Choose" (orange button) and "Replace" (orange text)
    display: inline-block; // avoid width:100%
    position: relative; // to position <input>
    margin: 0;
    overflow: hidden; // truncate <input>

    // <label> is the text
    label {
      display: block;
      margin: 0;
      cursor: pointer;
    }

    // Invisible file input the <label> points to
    //
    // We render it on top, visible so integration-test can click it
    // ... but we make it as invisible as possibleas 1px*1px so that integration tests can click it
    input {
      display: block;
      position: absolute;
      opacity: 0.01; // still visible!
      top: 0;
      left: 50%; // not 0 -- that would be behind border-radius
      width: 1px;
      height: 1px;
      overflow: hidden;
    }
  }

  .filename {
    // Appears in .uploading-file and .existing-file
    @include module-parameter;
    @include autosize-with-textarea;
    height: auto;
    cursor: default;
    &:hover {
      border-color: transparent; // No input possible
    }
  }

  .status {
    display: flex; // so last action can appear on right
    justify-content: space-between; // .upload-progress at left; action at right
    padding-top: 0.5rem;

    button.uploaded-file-select {
      @include _texty-button;
    }

    span.uploaded-file-select {
      // not clickable -- e.g., read-only selector
      @include _texty-button-disabled-span;
    }

    button[name='cancel-upload'] {
      @include _texty-button;
      // in .uploading-file
      color: $brand-orange;
      &:hover {
        color: $brand-orange--darker;
      }
    }

    .file-select-button {
      // in .existing-file
      @include _texty-button;
      color: $brand-orange;
      &:hover {
        color: $brand-orange--darker;
      }
    }
  }

  .no-file {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    @include title-2;
    color: $brand-orange;
    border: 3px dotted $brand-orange;
    background-color: $brand-orange--light;
    border-radius: 5px;

    p {
      text-align: center;
      margin: 0;
      &:not(:first-child) {
        margin-top: 1rem;
      }
    }

    p.file-select-button {
      @include action-button;
      @include button-orange--fill;
    }
  }

  .upload-progress,
  hr {
    display: block;
    width: 100%;
    height: 2px;
    border: 0;
    margin: 1rem 0 0;
    background: $Vlight-gray;

    .value {
      height: 100%;
      background-color: $brand-orange;
    }
  }
}

.uploaded-file-select-modal {
  @include content-1;
  padding: 2rem 0;

  .modal-dialog .modal-content .modal-body {
    padding: 0;
    background-color: $WF-background;
    .files {
      list-style: none;
      margin: 0;
      padding: 0;
      display: block;

      & > li {
        margin: 0;
        padding: 0;
      }

      a {
        display: block;
        color: inherit;
        text-decoration: none;
        padding: 1rem;
        margin-bottom: 1px;
        background: white;
        &:hover {
          background: $SuperLightGray;
        }

        &.selected {
          color: $brand-text--darker;
          background: $Vlight-gray;
        }

        .name {
          font-weight: bold;
        }

        &:not(.selected) .metadata {
          color: $text-muted;
        }

        abbr {
          text-decoration: none;
          cursor: inherit;
        }

        time {
          &::before {
            // Show " - " between elements
            content: '-';
            color: $text-muted;
            padding: 0 0.5rem;
          }
        }
      }
    }
  }

  .modal-footer {
    button {
      @include action-button;

      &[name='select'] {
        @include button-orange--fill;
      }

      &[name='close'] {
        @include button-blue;
      }
    }
  }
}

.upload-api-modal {
  font-size: 1.4rem;

  h5 {
    font-size: 1.6rem;
    font-weight: bold;
  }

  h5,
  p {
    margin: 1rem 0;
  }

  p.status {
    font-weight: bold;
  }

  dl {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 1rem;
    row-gap: 0.5rem;
    justify-content: start;
    align-items: center;
  }

  dt {
    white-space: nowrap;
  }

  dd {
    display: flex;
    margin: 0;
    align-items: center;

    button {
      flex: 0 0 auto;
      white-space: nowrap;
      margin-left: 1rem;
    }
  }

  kbd {
    @include code-1;
    flex: 0 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: $brand-text--learn;
  }
}
