.np-upload-input__upload-button {
  position: relative;
  padding: var(--size-16);
  display: flex;
  align-items: center;
  margin: 0;
  border-bottom-left-radius: var(--radius-small);
  border-bottom-right-radius: var(--radius-small);
  border: var(--outerBorder);
  cursor: pointer;

  .np-upload-input__title {
    color: var(--color-content-link);
    text-decoration: underline;
    text-underline-offset: 0.3em;

    & + .np-upload-input__text {
      margin-top: var(--size-4);
    }
  }

  .np-upload-input__icon {
    padding-right: var(--size-16);
    color: var(--color-interactive-primary);
  }

  &.is-dropping {
    .np-upload-input__icon,
    .np-upload-input__item-content {
      display: none;
    }
  }

  &:focus-within,
  &:focus-visible {
    outline: var(--ring-outline-color) solid 3px;
    outline-offset: -3px;
  }

  &-input {
    position: absolute;
    opacity: 0;
    z-index: -1;

    &:focus {
      outline: none;
    }
  }

  .np-upload-input__drop-file-overlay {
    display: flex;
    flex: 1;
    padding: 13px 0 !important;
    background-color: transparent;
    transition: transform 0.3s ease;
    position: relative;
  }
}

// at least 1 file uploaded or 1 error visible
.np-upload-input__upload-button--with-entries {
  border-top-width: 0;

  &:before {
    display: block;
    position: absolute;
    height: 1px;
    background-color: var(--color-border-neutral);
    content: " ";
    left: var(--size-16);
    width: calc(100% - 2 * var(--size-16));
    top: 0;
  }
}

// no files uploaded (only button shown)
.np-upload-input__upload-button--without-entries {
  border-top: var(--outerBorder);
  border-radius: var(--radius-small);
}

.np-upload-input__upload-button--enabled {
  &.is-dropping,
  &:hover,
  &:active {
    background: var(--color-background-neutral);

    &:before {
      width: 100%;
      left: 0;
    }
  }
}

.np-upload-input__upload-button--disabled {
  cursor: inherit;
}