.eControls .eAttachedFiles {
    width: 100%;

    & .file-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        max-width: var(--eAttachedFilesW, 100%);
        border-radius: var(--radius-none);
        border-bottom: 1px solid var(--gray-300);
        background: transparent;
        font-weight: 600;
        padding: 8px 12px;
        margin-bottom: 12px;
    }

    & a {
        color: var(--gray-900) !important;
    }

    & .eAttachedFiles__info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        width: 100%;
        min-width: 0;
    }

    /* Any intermediate flex wrapper (e.g., --eBlock in _FilesContainerPartial)
        must be able to shrink, otherwise a long name will push out the arrow/break the ellipsis. */
    & .eAttachedFiles__info > * {
        min-width: 0;
    }
    /* & .eAttachedFiles__info > svg {
        width: 32px;
        height: 32px;
    }*/

    & .eAttachedFiles__info-text {
        margin-left: var(--spacing-md);
        flex: 1 1 auto;
        min-width: 0; /* critical: allows text to shrink so ellipsis works */
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

#pendingFilesContainer {
    margin-top: 12px;
}