.FileInput {
  @apply relative flex cursor-pointer flex-col items-center gap-3 rounded-lg border border-gray-300 px-6 py-4 before:btu-icon before:btu-icon-upload before:rounded-full before:bg-gray-100 before:p-2 before:text-primary-700 after:text-sm after:font-semibold after:text-primary-700 after:[content:attr(data-choose)] hover:border-gray-300 hover:bg-gray-100 hover:before:bg-gray-200 hover:before:text-gray-700 hover:after:underline hover:after:[content:attr(data-choose)];

  input[type='file'] {
    @apply absolute bottom-0 left-0 right-0 top-0 cursor-pointer border-0 p-0 opacity-0;
  }

  &[data-placeholder] {
    @apply after:[content:attr(data-placeholder)];
  }

  &[data-value] {
    @apply inline-flex flex-row before:btu-icon-arrow-right-left after:overflow-hidden after:text-ellipsis after:whitespace-nowrap after:[content:attr(data-value)];
  }
}

.fileSelectorItem {
  @apply my-1.5;

  &.is-error {
    @apply min-h-0;

    > .Message {
      @apply w-full;
    }

    > *:not(.Message) {
      @apply !hidden;
    }
  }
}

.uploadableCover {
  @apply !bg-transparent;
}

.uploadableFile {
  @apply flex items-center justify-center rounded-lg border border-dashed border-primary-600 bg-primary-25 px-3 py-4;

  &:has(.RichTextEditor-upload) {
    @apply bg-primary-50/50;
  }

  &.is-active {
    @apply border-solid;
  }

  a {
    @apply blokk text-sm font-semibold text-gray-500 no-underline;
  }
}

.filePreview > a {
  @apply text-sm;
}

.File-upload {
  @apply flex gap-4 overflow-clip overflow-x-auto;

  /* the first instance of .upload-preview */
  > div:first-of-type {
    @apply ms-6;
  }

  /* the last instance of .upload-preview */
  > .upload-preview:not(:has(+ .upload-preview)) {
    @apply me-6;
  }
}

.is-processingFiles {
  .bulk-upload-files {
    @apply mx-0 flex-nowrap;

    > .CIG-label,
    > .CIG-small {
      @apply hidden;
    }
  }
}

.upload-preview {
  --RPB-size: 56px;
  --size: 150px;

  @apply ImageEditor-preview;
  @apply !inline-block !size-[--size] place-content-center rounded-lg border border-gray-300 bg-gray-100 [flex:1_0_auto];

  &.loading {
    @apply p-4;
  }

  img {
    @apply aspect-square object-cover;
  }

  .RPB-bg {
    @apply stroke-gray-200;
  }

  .RPB,
  .upload-percentage {
    @apply hidden;
  }

  &.loading {
    .upload-progress {
      @apply flex flex-col items-center gap-3 after:text-sm after:font-medium after:text-gray-700 after:[content:'Uploading'];

      img {
        @apply hidden;
      }

      .RPB {
        @apply blokk;
      }
    }
  }
}

.bulk-upload-files > .inputLarge .upload-preview.error,
.upload-preview.error {
  @apply hidden;
}

.bulk-upload-files {
  @apply !col-[fullbleed-start_/_fullbleed-end] mx-6 mb-2;

  .FileInput {
    @apply max-w-full flex-row before:btu-icon-file-plus before:border-none before:bg-primary-50 before:p-3.5 before:text-primary-600 after:font-medium after:text-gray-900 after:[content:attr(data-choose)] last:mt-3 hover:border-primary-300 hover:bg-primary-25 hover:after:text-primary-700 hover:after:[content:attr(data-choose)];

    &:last-child {
      @apply before:btu-icon-plus before:bg-teal-50 before:text-teal-700 hover:border-teal-500 hover:bg-teal-25 hover:after:text-teal-700 hover:after:[content:attr(data-choose)];
    }
  }

  > .inputLabel {
    @apply hidden;
  }

  > .inputLarge {
    .upload-preview {
      @apply inline-flex gap-2;

      .upload-preview-label {
        @apply hidden;
      }
    }
  }
}
