/*
 * <x-file>: the browser's file input in the text field's chrome
 * (resources/views/components/file.blade.php).
 *
 * The chrome is the field's (components/field.css); this file restyles only what the browser
 * draws. Its "No file chosen" line is transparent, because it can be neither truncated nor wrapped
 * and the caller shows what was chosen; its `::file-selector-button` is a tonal pill — a 32px
 * button in secondary-container with label-large, 16px padding, 12px before the line — so it reads
 * as the thing to press, with M3's hover state layer and disabled opacities (tokens/state.css). In
 * a filled field the button sits under the floating label, 28px tall.
 *
 * The field's root carries `data-md-file`.
 */

@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;

@import './field.css';

@layer material.components {
    /* `<x-file>`: the browser's own "No file chosen" line is transparent (the caller shows what was
       chosen), and its button is a tonal pill — the thing to press. */
    input[type='file'][data-md-field-control] {
        align-self: center;
        color: transparent;
        cursor: pointer;
    }

    input[type='file'][data-md-field-control]::file-selector-button {
        height: 32px;
        margin-inline-end: 12px;
        padding-inline: var(--md-sys-measurement-space200);
        border: 0;
        border-radius: var(--md-sys-shape-corner-full);
        background-color: var(--md-sys-color-secondary-container);
        color: var(--md-sys-color-on-secondary-container);
        cursor: pointer;
        font: var(--md-sys-typescale-label-lg);
        letter-spacing: var(--md-sys-typescale-label-lg-tracking);
        transition: background-color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);
    }

    @media (hover: hover) {
        input[type='file'][data-md-field-control]:hover::file-selector-button {
            background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), var(--md-sys-color-secondary-container));
        }
    }

    input[type='file'][data-md-field-control]:disabled::file-selector-button {
        background-color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-container-opacity) * 100%), transparent);
        color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent);
        cursor: default;
    }

    /* A file picker's button is taller than a line of text: it sits lower, and a little smaller. */
    [data-md-field][data-md-variant='filled']:has([data-md-field-label]) input[type='file'][data-md-field-control] {
        padding-block: 22px var(--md-sys-measurement-space75);
    }

    [data-md-field][data-md-variant='filled'] input[type='file'][data-md-field-control]::file-selector-button {
        height: 28px;
    }
}