.files-element {
    --file-border: 1px solid lightgrey;
    ul {
        padding: 0;
        list-style: none;
    }

    li {
        border-top: var(--file-border);
        display: flex;
        align-items: center;

        &:last-child {
            border-bottom: var(--file-border);
        }
    }
    .icon-helper {
        display: flex;
        flex: 0 0 auto;
        padding: 0.5rem;
        aspect-ratio: 1/1;
        width: 2rem;
        fill: var(--verder-lezen-knop-kleur, black);
    }
    .file-download {
        flex: 1 1 auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0.5rem;
        color: currentColor;
        transition: color .2s ease-in-out;

        text-decoration: none;
        &:hover,
        &:focus,
        &:active {
            text-decoration: underline;
            color: var(--verder-lezen-knop-kleur, inherit);
            .icon-download {
                opacity: 1;
            }
        }
    }
    .file-uid {
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .icon-download {
        flex: 0 0 auto;
        display: flex;

        padding: 0.5rem;
        aspect-ratio: 1/1;
        width: 1rem;
        margin-inline-start: auto;

        opacity: 0;
        transition: opacity 0.2s ease-in-out;
        fill: var(--verder-lezen-knop-kleur, black);
    }
}