@layer components {
  .upload {
    @apply relative inline-block;

    &.disabled {
      @apply cursor-not-allowed opacity-60;

      .upload-input {
        @apply cursor-not-allowed;
      }
    }
  }

  .upload-input {
    @apply absolute inset-0 hidden;

    &.draggable {
      @apply block opacity-0 w-full cursor-pointer;
    }
  }

  .upload-draggable {
    @apply min-h-20 border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg cursor-pointer flex items-center justify-center;
  }

  .upload-file-list {
    @apply mt-4;
  }

  .upload-file {
    @apply border border-gray-200 dark:border-gray-700 rounded-lg mb-2;
  }

  .upload-file-info {
    @apply flex flex-col justify-center ltr:ml-3 rtl:mr-3 min-h-16;
  }

  .upload-file-name {
    @apply text-sm font-medium;
  }

  .upload-file-wrapper {
    @apply flex items-center justify-between;
  }

  .upload-file-thumbnail {
    @apply p-2 flex justify-center items-center min-h-16 w-16;
  }

  .upload-file-info-wrapper {
    @apply flex items-center;
  }

  .upload-file-image {
    @apply max-w-full;
  }

  .upload-file-icon {
    @apply text-2xl p-2 text-gray-900 dark:text-gray-100  bg-gray-50 dark:bg-gray-700 border rounded-lg border-gray-200 dark:border-gray-700;
  }

  .upload-file-remove {
    @apply p-3 mx-2;
  }
}