/**
 * FILE COMPONENT
 * Componente per il caricamento file - FILE SINGOLO
 */

 @layer components {
    .rtds-file {
        @apply rtds-flex rtds-items-center rtds-gap-3 rtds-py-2 rtds-px-4 rtds-border rtds-border-gray-01 rtds-rounded-lg;
    }

    .rtds-file__info {
        @apply rtds-flex-1;
    }

    .rtds-file:where(.is-loading-error) {
        @apply rtds-bg-gradient-03;
    }

    /* Progress bar */
    .rtds-file__progress {
        @apply rtds-h-1 rtds-background-03 rtds-rounded-lg rtds-overflow-hidden;
    }

    .rtds-file__progress-bar {
        --_file-progress-bar-width: var(--file-progress-bar-width, 0%);
        @apply rtds-h-full rtds-background-secondary rtds-rounded-lg rtds-transition-all rtds-duration-300 rtds-ease-out rtds-w-[--_file-progress-bar-width];   
    }

    :where(.is-loading-completed) .rtds-file__progress-bar {
        @apply rtds-bg-success;
    }

    :where(.is-loading-error) .rtds-file__progress-bar {
        @apply rtds-bg-error;
    }

}