.ga-file-uploader {
  @apply flex flex-col gap-4;

  .ga-file-uploader__heading {
    @apply flex flex-1 flex-col gap-1;

    .ga-file-uploader__heading-label {
      @apply text-md align-middle font-medium;
    }

    .ga-file-uploader__heading-description {
      @apply text-sm font-normal;
    }
  }

  .ga-button {
    @apply w-fit;
  }

  .ga-file-uploader__heading {
    @apply text-(--ga-color-text-body);
  }

  &.ga-file-uploader--disabled .ga-file-uploader__heading {
    @apply text-(--ga-color-text-disable-selected);
  }

  .ga-file-uploader__file-list {
    @apply flex flex-1 flex-col gap-2;

    .ga-file-uploader__file-item {
      @apply text-md flex h-10 max-w-[58rem] min-w-[22rem] items-center justify-between rounded bg-(--ga-color-surface-disabled) px-2 py-1 font-normal text-(--ga-color-text-body);

      .ga-file-uploader__file-action {
        @apply flex h-4 w-4 cursor-pointer items-center justify-center rounded border-none bg-transparent p-0 text-(--ga-color-icon-action);

        &:focus-visible {
          @apply outline-2 outline-offset-2 outline-(--ga-color-border-focus);
        }
      }

      .ga-file-uploader__file-icon {
        @apply h-4 w-4;
      }

      &.ga-file-uploader__file-item--success {
        .ga-file-uploader__file-icon {
          @apply text-(--ga-color-icon-success);
        }
      }

      &.ga-file-uploader__file-item--error {
        @apply h-auto flex-col items-start gap-2 border border-(--ga-color-border-error) bg-(--ga-color-surface-error) outline outline-(--ga-color-border-error);

        .ga-file-uploader__error-file {
          @apply flex w-full items-center justify-between leading-6;
        }

        .ga-file-uploader__error-callout {
          @apply flex flex-row items-center gap-1 align-middle text-xs font-normal;

          .ga-file-uploader__error-callout-icon {
            @apply h-4 w-4 text-(--ga-color-icon-error);
          }
        }
      }
    }
  }

  .ga-file-uploader__input {
    @apply sr-only;
  }

  .ga-file-uploader__dropzone {
    @apply text-md flex min-h-[6.25rem] flex-1 items-center justify-center rounded border border-dashed border-(--ga-color-border-action) p-8 text-center font-normal text-(--ga-color-text-action);

    &:hover {
      @apply border-(--ga-color-border-action-hover) bg-(--ga-color-surface-action-hover-2) text-(--ga-color-text-action-hover);
    }

    &:focus-visible,
    &:focus-within {
      @apply border-none outline-2 outline-(--ga-color-border-focus) outline-solid;
    }

    &.ga-file-uploader__dropzone--drag-hover {
      @apply border-none bg-(--ga-color-surface-page) text-(--ga-color-text-action-hover) outline-2 outline-(--ga-color-border-focus) outline-solid;
    }
  }

  .ga-file-uploader__dropzone[aria-disabled='true'],
  &.ga-file-uploader--disabled .ga-file-uploader__dropzone {
    @apply cursor-not-allowed border-(--ga-color-border-disabled) bg-(--ga-color-surface-primary) text-(--ga-color-text-disabled);
  }
}