// stylelint-disable max-line-length
@use '../../../../utils/map' as *;
@use '../light/input-group' as *;
@use './validator' as *;

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

/// Generates a base dark input-group schema.
/// @access private
/// @type Map
$dark-base-input-group: (
    _meta: (
        name: 'input-group',
        variant: 'dark',
    ),
);

/// Generates a dark material input-group schema.
/// @type Map
/// @prop {Map} box-background [color: ('gray', 200, .38)] - The background color of an input group of type box.
/// @prop {Map} box-background-hover [color: ('gray', 200, .38)] - The background color of an input group of type box on hover.
/// @prop {Map} box-background-focus [color: ('gray', 300, .38)] - The background color of an input group of type box on focus.
/// @prop {Map} hover-bottom-line-color [color: ('gray', 800)] - The bottom line and border colors in the hover state.
/// @requires $material-input-group
$dark-material-input-group: extend(
    $material-input-group,
    $dark-base-input-group,
    (
        box-background: (
            color: (
                'gray',
                200,
                0.38,
            ),
        ),
        box-background-hover: (
            color: (
                'gray',
                200,
                0.38,
            ),
        ),
        box-background-focus: (
            color: (
                'gray',
                300,
                0.38,
            ),
        ),
        hover-bottom-line-color: (
            color: (
                'gray',
                800,
            ),
        ),
    )
);

/// Generates a dark fluent input-group schema.
/// @type Map
/// @prop {Map} idle-secondary-color [color: ('gray', 800)] - The label color in the idle state.
/// @prop {Map} disabled-text-color [color: ('gray', 300)] - The input text color in the disabled state.
/// @prop {Map} input-prefix-color [color: ('gray', 400)] - The text color of an input prefix of type line, box and border.
/// @prop {Map} input-prefix-color--filled [color: ('gray', 400)] - The input prefix color in the filled state.
/// @prop {Map} input-prefix-color--focused [color: ('gray', 400)] - The input prefix color in the focused state.
/// @prop {Map} input-prefix-background [color: ('gray', 50)] - The background color of an input prefix of type line, box and border.
/// @prop {Map} input-prefix-background--filled [color: ('gray', 50)] - The background color of an input prefix in the filled state.
/// @prop {Map} input-prefix-background--focused [color: ('gray', 50)] - The background color of an input prefix in the focused state.
/// @prop {Map} input-suffix-color [color: ('gray', 400)] - The text color of an input suffix of type line, box and border.
/// @prop {Map} input-suffix-color--filled [color: ('gray', 400)] - The input suffix color in the filled state.
/// @prop {Map} input-suffix-color--focused [color: ('gray', 400)] - The input suffix color in the focused state.
/// @prop {Map} input-suffix-background [color: ('gray', 50)] - The background color of an input sufix of type line, box and border.
/// @prop {Map} input-suffix-background-filled [color: ('gray', 50)] - The background color of an input suffix in the filled state.
/// @prop {Map} input-suffix-background--focused [color: ('gray', 50)] - The background color of an input suffix in the focused state.
/// @prop {Map} placeholder-color [color: ('gray', 400)] - The placeholder color of an input group.
/// @prop {Map} hover-placeholder-color [color: ('gray', 400)] - The placeholder color of an input group on hover.
/// @prop {Map} disabled-placeholder-color [color: ('gray', 300)] - The disabled placeholder color of an input group.
/// @prop {Map} box-background [color: ('gray', 100)] - The background color of an input group of type box.
/// @prop {Map} border-color [color: ('gray', 400)] - The border color for input groups of type border and fluent.
/// @prop {Map} hover-border-color [color: ('gray', 800)] - The hover input border for input groups of type border and fluent.
/// @prop {Map} focused-border-color [color: ('primary', 500)] - The focused input border color for input groups of type border and fluent.
/// @prop {Map} disabled-border-color [color: ('gray', 100)] - The disabled border color for input groups of type border and fluent.
/// @requires $fluent-input-group
$dark-fluent-input-group: extend(
    $fluent-input-group,
    $dark-base-input-group,
    (
        idle-secondary-color: (
            color: (
                'gray',
                800,
            ),
        ),
        disabled-text-color: (
            color: (
                'gray',
                300,
            ),
        ),
        input-prefix-color: (
            color: (
                'gray',
                400,
            ),
        ),
        input-prefix-color--filled: (
            color: (
                'gray',
                400,
            ),
        ),
        input-prefix-color--focused: (
            color: (
                'gray',
                400,
            ),
        ),
        input-prefix-background: (
            color: (
                'gray',
                50,
            ),
        ),
        input-prefix-background--filled: (
            color: (
                'gray',
                50,
            ),
        ),
        input-prefix-background--focused: (
            color: (
                'gray',
                50,
            ),
        ),
        input-suffix-color: (
            color: (
                'gray',
                400,
            ),
        ),
        input-suffix-color--filled: (
            color: (
                'gray',
                400,
            ),
        ),
        input-suffix-color--focused: (
            color: (
                'gray',
                400,
            ),
        ),
        input-suffix-background: (
            color: (
                'gray',
                50,
            ),
        ),
        input-suffix-background--filled: (
            color: (
                'gray',
                50,
            ),
        ),
        input-suffix-background--focused: (
            color: (
                'gray',
                50,
            ),
        ),
        placeholder-color: (
            color: (
                'gray',
                400,
            ),
        ),
        hover-placeholder-color: (
            color: (
                'gray',
                400,
            ),
        ),
        disabled-placeholder-color: (
            color: (
                'gray',
                300,
            ),
        ),
        box-background: (
            color: (
                'gray',
                100,
            ),
        ),
        border-color: (
            color: (
                'gray',
                400,
            ),
        ),
        hover-border-color: (
            color: (
                'gray',
                800,
            ),
        ),
        focused-border-color: (
            color: (
                'primary',
                500,
            ),
        ),
        disabled-border-color: (
            color: (
                'gray',
                100,
            ),
        ),
    )
);

/// Generates a dark bootstrap input-group schema.
/// @type Map
/// @requires $bootstrap-input-group
$dark-bootstrap-input-group: extend($bootstrap-input-group, $dark-base-input-group);

/// Generates a dark indigo input-group schema,
/// @type Map
/// @prop {Map} input-prefix-color [contrast-color: ('gray', 50, .6)] - The text color of an input prefix of type line, box and border.
/// @prop {Map} input-suffix-color [contrast-color: ('gray', 50, .6)] - The text color of an input suffix of type line, box and border.
/// @prop {Map} input-prefix-color--filled [contrast-color: ('gray', 50, .6)] - The input prefix color in the filled state.
/// @prop {Map} input-suffix-color--filled [contrast-color: ('gray', 50, .6)] - The input suffix color in the filled state.
/// @prop {Map} input-prefix-color--focused [contrast-color: ('gray', 50, .6)] - The input prefix color in the focused state.
/// @prop {Map} input-suffix-color--focused [contrast-color: ('gray', 50, .6)] - The input suffix color in the focused state.
/// @prop {Map} idle-bottom-line-color [contrast-color: ('gray', 50, .4)] - The bottom line and border colors in the idle state.
/// @prop {Map} hover-bottom-line-color [contrast-color: ('gray', 50, .8)] - The bottom line and border colors in the hover state.
/// @prop {Map} disabled-bottom-line-color [contrast-color: ('gray', 50, .15)] - The bottom line and border colors in the disabled state.
/// @prop {Map} helper-text-color [contrast-color: ('gray', 50, .8)] - The helper text color.
/// @prop {Map} idle-text-color [contrast-color: ('gray', 50, .8)] - The input text color in the idle state.
/// @prop {Map} filled-text-color [contrast-color: ('gray', 50, .8)] - The input text color in the filled state.
/// @prop {Map} filled-text-hover-color [contrast-color: ('gray', 50)] - The input text color in the filled state on hover.
/// @prop {Map} disabled-text-color [contrast-color: ('gray', 50, .2)] - The input text color in the disabled state.
/// @prop {Map} box-background-hover [contrast-color: ('gray', 50, .1)] - The background color of an input group of type box on hover.
/// @prop {Map} box-background-focus [contrast-color: ('gray', 50, .1)] - The background color of an input group of type box on focus.
/// @prop {Map} idle-secondary-color [contrast-color: ('gray', 50, .6)] - The label color in the idle state.
/// @prop {Map} focused-text-color [contrast-color: ('gray', 50)] - The input text color in the focused state.
/// @prop {Map} focused-secondary-color [contrast-color: ('gray', 50, .6)] - The label color in the focused state.
/// @prop {Map} placeholder-color [contrast-color: ('gray', 50, .6)] - The placeholder color of an input group.
/// @prop {Map} hover-placeholder-color [contrast-color: ('gray', 50, .8)] - The placeholder color of an input group on hover.
/// @prop {Map} disabled-placeholder-color [contrast-color: ('gray', 50, .2)] - The disabled placeholder color of an input group.
/// @prop {Map} helper-text-color [contrast-color: ('gray', 50, .8)] - The color used for helper text.
/// @prop {Map} text-error-color [contrast-color: ('gray', 50, .8)] - The color used for the error message.
/// @requires $indigo-input-group
/// @requires $dark-indigo-validator
$dark-indigo-input-group: extend(
    $indigo-input-group,
    $dark-indigo-validator,
    $dark-base-input-group,
    (
        input-prefix-color: (
            contrast-color: (
                'gray',
                50,
                0.6,
            ),
        ),
        input-suffix-color: (
            contrast-color: (
                'gray',
                50,
                0.6,
            ),
        ),
        input-prefix-color--filled: (
            contrast-color: (
                'gray',
                50,
                0.6,
            ),
        ),
        input-suffix-color--filled: (
            contrast-color: (
                'gray',
                50,
                0.6,
            ),
        ),
        input-prefix-color--focused: (
            contrast-color: (
                'gray',
                50,
                0.6,
            ),
        ),
        input-suffix-color--focused: (
            contrast-color: (
                'gray',
                50,
                0.6,
            ),
        ),
        idle-bottom-line-color: (
            contrast-color: (
                'gray',
                50,
                0.4,
            ),
        ),
        hover-bottom-line-color: (
            contrast-color: (
                'gray',
                50,
                0.8,
            ),
        ),
        disabled-bottom-line-color: (
            contrast-color: (
                'gray',
                50,
                0.15,
            ),
        ),
        helper-text-color: (
            contrast-color: (
                'gray',
                50,
                0.8,
            ),
        ),
        idle-text-color: (
            contrast-color: (
                'gray',
                50,
                0.8,
            ),
        ),
        filled-text-color: (
            contrast-color: (
                'gray',
                50,
                0.8,
            ),
        ),
        filled-text-hover-color: (
            contrast-color: (
                'gray',
                50,
            ),
        ),
        disabled-text-color: (
            contrast-color: (
                'gray',
                50,
                0.2,
            ),
        ),
        box-background-hover: (
            contrast-color: (
                'gray',
                50,
                0.1,
            ),
        ),
        box-background-focus: (
            contrast-color: (
                'gray',
                50,
                0.1,
            ),
        ),
        idle-secondary-color: (
            contrast-color: (
                'gray',
                50,
                0.6,
            ),
        ),
        focused-text-color: (
            contrast-color: (
                'gray',
                50,
            ),
        ),
        focused-secondary-color: (
            contrast-color: (
                'gray',
                50,
                0.6,
            ),
        ),
        placeholder-color: (
            contrast-color: (
                'gray',
                50,
                0.6,
            ),
        ),
        hover-placeholder-color: (
            contrast-color: (
                'gray',
                50,
                0.8,
            ),
        ),
        disabled-placeholder-color: (
            contrast-color: (
                'gray',
                50,
                0.2,
            ),
        ),
    )
);