@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/ring.less";
@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_links.less";
@import (reference) './uploadItem/UploadItem.less';

.np-upload-input {
  --outerBorder: 1px solid var(--color-interactive-secondary);
  border-radius: var(--radius-small);

  .np-upload-input__section {
    margin: 0;

    // only 1 file allowed and already uploaded (no UploadButton shown)
    &:only-child {
      .np-upload-input__item {
        border-radius: var(--radius-small);
        border-bottom: var(--outerBorder);
      }
    }

    // if the last item in the file list is interactive (not an error)
    // and the user is hovering over it, then we need to adjust the
    // bottom separator, which happens to be in .np-upload-input__section--uploader
    &:has(.np-upload-input__item:last-child.is-interactive:hover):not(:has(.np-upload-input__item-button:hover))
    + .np-upload-input__section--uploader .np-upload-input__upload-button::before {
      left: 0;
      width: 100%;
      top: 0;
    }
  }
}