@use '../../../../utils/map' as *;
@use '../../../../typography/functions' as *;

////
/// @package theming
/// @group schemas
/// @access public
////

/// @prop {Map} file-names-background [transparent] - The file names container background color.
/// @prop {Map} file-names-background--focused [transparent] - The file names container background color when the file input is focused.
/// @prop {Map} file-names-background--filled [transparent] - The file names container background color when the file input is filled.
/// @prop {Map} file-names-background--disabled [transparent] - The file names container background color when the file input is disabled.
/// @prop {Map} file-names-foreground [color: ('gray', 900)] - The file names color.
/// @prop {Map} file-names-foreground--focused [color: ('gray', 900)] - The file names color when the file input is focused.
/// @prop {Map} file-names-foreground--filled [color: ('gray', 900)] - The file names color when the file input is filled.
/// @prop {Map} file-names-foreground--disabled [color: ('gray', 500)] - The file names color when the file input is disabled.
/// @prop {Map} file-selector-button-background [transparent] - The file input selector button background color.
/// @prop {Map} file-selector-button-background--focused [transparent] - The selector button background color when the file input is focused.
/// @prop {Map} file-selector-button-background--filled [transparent] - The selector button background color when the file input is filled.
/// @prop {Map} file-selector-button-background--disabled [transparent] - The selector button background color when the file input is disabled.
/// @prop {Map} file-selector-button-foreground [color: ('gray', 900)] - The file input selector button foreground color.
/// @prop {Map} file-selector-button-foreground--focused [color: ('gray', 900)] - The selector button foreground color when the file input is focused.
/// @prop {Map} file-selector-button-foreground--filled [color: ('gray', 900)] - The selector button foreground color when the file input is filled.
/// @prop {Map} file-selector-button-foreground--disabled [color: ('gray', 500)] - The selector button foreground color when the file input is disabled.
$light-file-input: (
    file-names-background: transparent,
    file-names-background--focused: transparent,
    file-names-background--filled: transparent,
    file-names-background--disabled: transparent,
    file-names-foreground: (
        color: (
            'gray',
            900,
        ),
    ),
    file-names-foreground--focused: (
        color: (
            'gray',
            900,
        ),
    ),
    file-names-foreground--filled: (
        color: (
            'gray',
            900,
        ),
    ),
    file-names-foreground--disabled: (
        color: (
            'gray',
            500,
        ),
    ),
    file-selector-button-background: transparent,
    file-selector-button-background--focused: transparent,
    file-selector-button-background--filled: transparent,
    file-selector-button-background--disabled: transparent,
    file-selector-button-foreground: (
        color: (
            'gray',
            900,
        ),
    ),
    file-selector-button-foreground--focused: (
        color: (
            'gray',
            900,
        ),
    ),
    file-selector-button-foreground--filled: (
        color: (
            'gray',
            900,
        ),
    ),
    file-selector-button-foreground--disabled: (
        color: (
            'gray',
            500,
        ),
    ),
    _meta: (
        name: 'file-input',
        variant: 'light',
    ),
);

/// Generates a light fluent file input schema.
/// @type Map
/// @requires $light-file-input
$fluent-file-input: extend(
    $light-file-input,
    (
        _meta: (
            theme: 'fluent',
        ),
    )
);

/// @prop {Map} file-names-background--disabled [color: ('gray', 100)] - The file names container background color when the file input is disabled.
/// @prop {Map} file-names-foreground [color: ('gray', 700)] - The file names color.
/// @prop {Map} file-names-foreground--disabled [color: ('gray', 400)] - The file names color when the file input is disabled.
/// @prop {Map} file-selector-button-background [color: ('gray', 300)] - The file input selector button background color.
/// @prop {Map} file-selector-button-background--focused [color: ('gray', 300)] - The selector button background color when the file input is focused.
/// @prop {Map} file-selector-button-background--filled [color: ('gray', 300)] - The selector button background color when the file input is filled.
/// @prop {Map} file-selector-button-background--disabled [color: ('gray', 100)] - The selector button background color when the file input is disabled.
/// @prop {Map} file-selector-button-foreground [color: ('gray', 800)] - The file input selector button foreground color.
/// @prop {Map} file-selector-button-foreground--focused [color: ('gray', 900)] - The selector button foreground color when the file input is focused.
/// @prop {Map} file-selector-button-foreground--filled [color: ('gray', 900)] - The selector button foreground color when the file input is filled.
/// @prop {Map} file-selector-button-foreground--disabled [color: ('gray', 400)] - The selector button foreground color when the file input is disabled.
/// @requires $light-file-input
$bootstrap-file-input: extend(
    $light-file-input,
    (
        file-names-background--disabled: (
            color: (
                'gray',
                100,
            ),
        ),
        file-names-foreground: (
            color: (
                'gray',
                700,
            ),
        ),
        file-names-foreground--disabled: (
            color: (
                'gray',
                400,
            ),
        ),
        file-selector-button-background: (
            color: (
                'gray',
                300,
            ),
        ),
        file-selector-button-background--focused: (
            color: (
                'gray',
                300,
            ),
        ),
        file-selector-button-background--filled: (
            color: (
                'gray',
                300,
            ),
        ),
        file-selector-button-background--disabled: (
            color: (
                'gray',
                100,
            ),
        ),
        file-selector-button-foreground: (
            color: (
                'gray',
                800,
            ),
        ),
        file-selector-button-foreground--disabled: (
            color: (
                'gray',
                400,
            ),
        ),
        _meta: (
            theme: 'bootstrap',
        ),
    )
);

/// @prop {Map} file-names-foreground [color: ('gray', 800)] - The file names color.
/// @prop {Map} file-names-foreground--filled [color: ('gray', 800)] - The file names color when the file input is filled.
/// @prop {Map} file-names-foreground--disabled [color: ('gray', 900, .2)] - The file names color when the file input is disabled.
/// @prop {Map} file-selector-button-foreground [color: ('gray', 700)] - The file input selector button foreground color.
/// @prop {Map} file-selector-button-foreground--focused [color: ('gray', 700)] - The selector button foreground color when the file input is focused.
/// @prop {Map} file-selector-button-foreground--filled [color: ('gray', 700)] - The selector button foreground color when the file input is filled.
/// @prop {Map} file-selector-button-foreground--disabled [color: ('gray', 900, .2)] - The selector button foreground color when the file input is disabled.
/// @requires $light-file-input
$indigo-file-input: extend(
    $light-file-input,
    (
        file-names-foreground: (
            color: (
                'gray',
                800,
            ),
        ),
        file-names-foreground--filled: (
            color: (
                'gray',
                800,
            ),
        ),
        file-names-foreground--disabled: (
            color: (
                'gray',
                900,
                0.2,
            ),
        ),
        file-selector-button-foreground: (
            color: (
                'gray',
                700,
            ),
        ),
        file-selector-button-foreground--focused: (
            color: (
                'gray',
                700,
            ),
        ),
        file-selector-button-foreground--filled: (
            color: (
                'gray',
                700,
            ),
        ),
        file-selector-button-foreground--disabled: (
            color: (
                'gray',
                900,
                0.2,
            ),
        ),
        _meta: (
            theme: 'indigo',
        ),
    )
);

/// @prop {Map} file-names-foreground [color: ('gray', 700)] - The file names color.
/// @prop {Map} file-selector-button-foreground [color: ('secondary', 500)] - The file input selector button foreground color.
/// @prop {Map} file-selector-button-foreground--focused [color: ('secondary', 500)] - The selector button foreground color when the file input is focused.
/// @prop {Map} file-selector-button-foreground--filled [color: ('secondary', 500)] - The selector button foreground color when the file input is filled.
/// @requires $light-file-input
$material-file-input: extend(
    $light-file-input,
    (
        file-names-foreground: (
            color: (
                'gray',
                700,
            ),
        ),
        file-selector-button-foreground: (
            color: (
                'secondary',
                500,
            ),
        ),
        file-selector-button-foreground--focused: (
            color: (
                'secondary',
                500,
            ),
        ),
        file-selector-button-foreground--filled: (
            color: (
                'secondary',
                500,
            ),
        ),
        _meta: (
            theme: 'material',
        ),
    )
);