/* Fichier — composant canonique ; son emploi : canon_file.md. */

@layer components {
    .file-source[aria-hidden="true"] {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
    }
    .file-control {
        display: flex;
        align-items: center;
        gap: var(--canon-space-3);
        padding-block: var(--canon-space-1);
        padding-inline-start: var(--canon-space-1);
    }
    .file-button {
        flex: none;
    }
    .file-value {
        flex: 1;
        min-width: 0;
        overflow: hidden;
    }
}

@layer components {
    .file-source[aria-hidden="true"] {
        border: 0;
        clip-path: inset(50%);
    }
    .file-source:focus-visible + .file > .file-control {
        outline: var(--canon-focus-width) var(--canon-focus-style) var(--canon-theme-focus);
        outline-offset: var(--canon-focus-offset);
        box-shadow: var(--canon-focus-halo);
    }
    .file-control[aria-disabled="true"] {
        border-color: var(--canon-theme-line);
    }

    .file-source[aria-hidden="true"] {
        white-space: nowrap;
    }
    .file-value {
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .file-empty {
        color: var(--canon-theme-muted);
    }
    .file-control[aria-disabled="true"] {
        color: var(--canon-theme-faint);
    }

    .file-source[aria-hidden="true"] {
        pointer-events: none;
    }
}