@use '../../../../utils/map' as *;
@use '../light/icon-button' as *;

// stylelint-disable max-line-length

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

/// Generates a dark material flat icon button schema.
/// @type {Map}
/// @requires {Map} $material-flat-icon-button
$material-flat-icon-button-dark: extend(
    $material-flat-icon-button,
    (
        _meta: (
            theme: 'material',
            variant: 'dark',
            type: 'flat',
        ),
    )
);

/// Generates a dark material contained icon button schema.
/// @type {Map}
/// @prop {Map} background [color: ('gray', 900, .24)] - The background color of the material contained icon button.
/// @prop {Map} hover-background [color: ('gray', 900, .32)] - The hover background color of the material contained icon button.
/// @prop {Map} focus-background [color: ('gray', 900, .4)] - The focus background color of the material contained icon button.
/// @prop {Map} focus-hover-background [color: ('gray', 900, .44)] - The background color on focus hovered state of the material contained icon button.
/// @prop {Map} active-background [color: ('gray', 900, .5)] - The active background color of the material contained icon button.
/// @prop {Map} disabled-background [color: ('gray', 900, .16)] - The disabled background color of the material contained icon button.
/// @requires {Map} $material-contained-icon-button
$material-contained-icon-button-dark: extend(
    $material-contained-icon-button,
    (
        background: (
            color: (
                'gray',
                900,
                0.24,
            ),
        ),
        hover-background: (
            color: (
                'gray',
                900,
                0.32,
            ),
        ),
        focus-background: (
            color: (
                'gray',
                900,
                0.4,
            ),
        ),
        focus-hover-background: (
            color: (
                'gray',
                900,
                0.44,
            ),
        ),
        active-background: (
            color: (
                'gray',
                900,
                0.5,
            ),
        ),
        disabled-background: (
            color: (
                'gray',
                900,
                0.16,
            ),
        ),
        _meta: (
            theme: 'material',
            variant: 'dark',
            type: 'contained',
        ),
    )
);

/// Generates a dark material outlined icon button schema.
/// @type {Map}
/// @requires {Map} $material-outlined-icon-button
$material-outlined-icon-button-dark: extend(
    $material-outlined-icon-button,
    (
        _meta: (
            theme: 'material',
            variant: 'dark',
            type: 'outlined',
        ),
    )
);

/// Generates a dark material icon button schema.
/// @type {Map}
/// @requires {Map} $material-flat-icon-button-dark
/// @requires {Map} $material-outlined-icon-button-dark
/// @requires {Map} $material-contained-icon-button-dark
$dark-material-icon-button: (
    flat: $material-flat-icon-button-dark,
    outlined: $material-outlined-icon-button-dark,
    contained: $material-contained-icon-button-dark,
);

/// @type {Map}
/// @prop {Map} hover-background [color: ('gray', 50)] - The hover background color of the fluent icon button.
/// @prop {Map} focus-border-color [color: ('gray', 400)] - The focus border color of the fluent dark icon button.
/// @prop {Map} focus-hover-background [color: ('gray', 50)] - The background color on focus hovered state of the icon button.
/// @prop {Map} active-background [color: ('gray', 100)] - The active background color of the fluent icon button.
/// @prop {Map} disabled-background [color: ('gray', 50)] - The disabled background color of the icon button.
/// @prop {Map} disabled-foreground [color: ('gray', 200)] - The disabled foreground color of the icon button.
$fluent-base-icon-button-dark: (
    hover-background: (
        color: (
            'gray',
            50,
        ),
    ),
    focus-border-color: (
        color: (
            'gray',
            400,
        ),
    ),
    focus-hover-background: (
        color: (
            'gray',
            50,
        ),
    ),
    active-background: (
        color: (
            'gray',
            100,
        ),
    ),
    disabled-background: (
        color: (
            'gray',
            50,
        ),
    ),
    disabled-foreground: (
        color: (
            'gray',
            200,
        ),
    ),
);

/// Generates a dark fluent flat icon button schema.
/// @type {Map}
/// @prop {Map} foreground [color: ('primary', 300)] - The idle text color of the fluent icon button.
/// @prop {Map} hover-foreground [color: ('primary', 200)] - The hover text color of the fluent icon button.
/// @prop {Map} focus-foreground [color: ('primary', 300)] - The focus text color of the fluent icon button.
/// @prop {Map} focus-hover-foreground [color: ('primary', 200)] - The foreground color on focus hovered state of the icon button.
/// @prop {Map} active-foreground [color: ('primary', 100)] - The active text color of the fluent icon button.
/// @requires {Map} $fluent-flat-icon-button
/// @requires {Map} $fluent-base-icon-button-dark
$fluent-flat-icon-button-dark: extend(
    $fluent-flat-icon-button,
    $fluent-base-icon-button-dark,
    (
        foreground: (
            color: (
                'primary',
                300,
            ),
        ),
        hover-foreground: (
            color: (
                'primary',
                200,
            ),
        ),
        focus-foreground: (
            color: (
                'primary',
                300,
            ),
        ),
        focus-hover-foreground: (
            color: (
                'primary',
                200,
            ),
        ),
        active-foreground: (
            color: (
                'primary',
                100,
            ),
        ),
        _meta: (
            theme: 'fluent',
            variant: 'dark',
            type: 'flat',
        ),
    )
);

/// Generates a dark fluent contained icon button schema.
/// @type {Map}
/// @prop {Map} background [color: ('primary', 300)] - The background color of the fluent dark contained icon button.
/// @prop {Map} foreground [contrast-color: ('primary', 300)] - The idle text color of the fluent dark contained icon button.
/// @prop {Map} hover-background [color: ('primary', 200)] - The hover background color of the fluent dark contained icon button.
/// @prop {Map} hover-foreground [contrast-color: ('primary', 300)] - The hover text color of the fluent dark contained icon button.
/// @prop {Map} focus-background [color: ('primary', 300)] - The focus background color of the fluent dark contained icon button.
/// @prop {Map} focus-foreground [contrast-color: ('primary', 300)] - The focus text color of the fluent dark contained icon button.
/// @prop {Map} focus-hover-background [color: ('primary', 200)] - The background color on focus hovered state of the icon button.
/// @prop {Map} focus-hover-foreground [contrast-color: ('primary', 300)] - The foreground color on focus hovered state of the icon button.
/// @prop {Map} active-background [color: ('primary', 100)] - The active background color of the fluent dark contained icon button.
/// @prop {Map} active-foreground [contrast-color: ('primary', 300)] - The active text color of the fluent dark contained icon button.
/// @prop {Map} focus-border-color [contrast-color: ('primary', 300)] - The focus border color of the fluent dark contained icon button.
/// @requires {Map} $fluent-contained-icon-button
/// @requires {Map} $fluent-base-icon-button-dark
$fluent-contained-icon-button-dark: extend(
    $fluent-contained-icon-button,
    $fluent-base-icon-button-dark,
    (
        background: (
            color: (
                'primary',
                300,
            ),
        ),
        foreground: (
            contrast-color: (
                'primary',
                300,
            ),
        ),
        hover-background: (
            color: (
                'primary',
                200,
            ),
        ),
        hover-foreground: (
            contrast-color: (
                'primary',
                300,
            ),
        ),
        focus-background: (
            color: (
                'primary',
                300,
            ),
        ),
        focus-foreground: (
            contrast-color: (
                'primary',
                300,
            ),
        ),
        focus-hover-background: (
            color: (
                'primary',
                200,
            ),
        ),
        focus-hover-foreground: (
            contrast-color: (
                'primary',
                300,
            ),
        ),
        active-background: (
            color: (
                'primary',
                100,
            ),
        ),
        active-foreground: (
            contrast-color: (
                'primary',
                300,
            ),
        ),
        focus-border-color: (
            contrast-color: (
                'primary',
                300,
            ),
        ),
        _meta: (
            theme: 'fluent',
            variant: 'dark',
            type: 'contained',
        ),
    )
);

/// Generates a dark fluent outlined icon button schema.
/// @type {Map}
/// @prop {Map} border-color [color: ('gray', 400)] - The border color of the fluent outlined icon button.
/// @prop {Map} disabled-border-color [color: ('gray', 100)] - The disabled focused border color of an outlined icon button.
/// @requires {Map} $fluent-outlined-icon-button
/// @requires {Map} $fluent-base-icon-button-dark
$fluent-outlined-icon-button-dark: extend(
    $fluent-outlined-icon-button,
    $fluent-base-icon-button-dark,
    (
        border-color: (
            color: (
                'gray',
                400,
            ),
        ),
        disabled-border-color: (
            color: (
                'gray',
                100,
            ),
        ),
        _meta: (
            theme: 'fluent',
            variant: 'dark',
            type: 'outlined',
        ),
    )
);

/// Generates a dark fluent icon button schema.
/// @type {Map}
/// @requires {Map} $fluent-flat-icon-button-dark
/// @requires {Map} $fluent-outlined-icon-button-dark
/// @requires {Map} $fluent-contained-icon-button-dark
$dark-fluent-icon-button: (
    flat: $fluent-flat-icon-button-dark,
    outlined: $fluent-outlined-icon-button-dark,
    contained: $fluent-contained-icon-button-dark,
);

/// Generates a dark bootstrap flat icon button schema.
/// @type {Map}
/// @requires {Map} $bootstrap-flat-icon-button
$bootstrap-flat-icon-button-dark: extend(
    $bootstrap-flat-icon-button,
    (
        _meta: (
            theme: 'bootstrap',
            variant: 'dark',
            type: 'flat',
        ),
    )
);

/// Generates a dark bootstrap contained icon button schema.
/// @type {Map}
/// @requires {Map} $bootstrap-contained-icon-button
$bootstrap-contained-icon-button-dark: extend(
    $bootstrap-contained-icon-button,
    (
        _meta: (
            theme: 'bootstrap',
            variant: 'dark',
            type: 'contained',
        ),
    )
);

/// Generates a dark bootstrap outlined icon button schema.
/// @type {Map}
/// @requires {Map} $bootstrap-outlined-icon-button
$bootstrap-outlined-icon-button-dark: extend(
    $bootstrap-outlined-icon-button,
    (
        _meta: (
            theme: 'bootstrap',
            variant: 'dark',
            type: 'outlined',
        ),
    )
);

/// Generates a dark bootstrap icon button schema.
/// @type {Map}
/// @requires {Map} $bootstrap-flat-icon-button-dark
/// @requires {Map} $bootstrap-outlined-icon-button-dark
/// @requires {Map} $bootstrap-contained-icon-button-dark
$dark-bootstrap-icon-button: (
    flat: $bootstrap-flat-icon-button-dark,
    outlined: $bootstrap-outlined-icon-button-dark,
    contained: $bootstrap-contained-icon-button-dark,
);

/// Generates a dark base indigo icon button schema.
/// @prop {Map} foreground [contrast-color: ('primary', 500, .8)] - The idle text color of the indigo icon button.
/// @prop {Map} hover-background [contrast-color: ('primary', 500, .1)] - The hover background color of the indigo icon button.
/// @prop {Map} hover-foreground [contrast-color: ('primary', 500)] - The hover text color of the indigo icon button.
/// @prop {Map} focus-foreground [contrast-color: ('primary', 500, .8)] - The focus text color of the indigo icon button.
/// @prop {Map} focus-hover-background [contrast-color: ('primary', 500, .1)] - The background color on focus hovered state of the icon button.
/// @prop {Map} focus-hover-foreground [contrast-color: ('primary', 500)] - The foreground color on focus hovered state of the icon button.
/// @prop {Map} focus-border-color [contrast-color: ('primary', 500, .2)] - The focus border color of the indigo icon button.
/// @prop {Map} active-background [contrast-color: ('primary', 500, .1)] - The active background color of the indigo icon button.
/// @prop {Map} active-foreground [contrast-color: ('primary', 500)] - The active text color of the indigo icon button.
/// @prop {Map} disabled-foreground [contrast-color: ('gray', 50, .2)] - The disabled foreground color of the indigo icon button.
/// @prop {Map} shadow-color [contrast-color: ('primary', 500, 0.2)] - The shadow color of the indigo icon button.
/// @type {Map}
$indigo-base-icon-button-dark: (
    foreground: (
        contrast-color: (
            'primary',
            500,
            0.8,
        ),
    ),
    hover-background: (
        contrast-color: (
            'primary',
            500,
            0.1,
        ),
    ),
    hover-foreground: (
        contrast-color: (
            'primary',
            500,
        ),
    ),
    focus-foreground: (
        contrast-color: (
            'primary',
            500,
            0.8,
        ),
    ),
    focus-hover-background: (
        contrast-color: (
            'primary',
            500,
            0.1,
        ),
    ),
    focus-hover-foreground: (
        contrast-color: (
            'primary',
            500,
        ),
    ),
    focus-border-color: (
        contrast-color: (
            'primary',
            500,
            0.2,
        ),
    ),
    active-background: (
        contrast-color: (
            'primary',
            500,
            0.1,
        ),
    ),
    active-foreground: (
        contrast-color: (
            'primary',
            500,
        ),
    ),
    disabled-foreground: (
        contrast-color: (
            'gray',
            50,
            0.2,
        ),
    ),
    shadow-color: (
        contrast-color: (
            'primary',
            500,
            0.2,
        ),
    ),
);

/// Generates a dark indigo flat icon button schema.
/// @type {Map}
/// @requires {Map} $indigo-flat-icon-button
$indigo-flat-icon-button-dark: extend(
    $indigo-flat-icon-button,
    $indigo-base-icon-button-dark,
    (
        _meta: (
            theme: 'indigo',
            variant: 'dark',
            type: 'flat',
        ),
    )
);

/// Generates a dark indigo outlined icon button schema.
/// @type {Map}
/// @prop {Map} border-color [contrast-color: ('primary', 500, 0.6)] - The border color of the indigo outlined icon button.
/// @prop {Map} disabled-border-color [contrast-color: ('primary', 500, 0.2)] - The disabled border color of the indigo outlined icon button.
/// @requires {Map} $indigo-outlined-icon-button
$indigo-outlined-icon-button-dark: extend(
    $indigo-outlined-icon-button,
    $indigo-base-icon-button-dark,
    (
        border-color: (
            contrast-color: (
                'primary',
                500,
                0.6,
            ),
        ),
        disabled-border-color: (
            contrast-color: (
                'primary',
                500,
                0.2,
            ),
        ),
        _meta: (
            theme: 'indigo',
            variant: 'dark',
            type: 'outlined',
        ),
    )
);

/// Generates a dark indigo contained icon button schema.
/// @type {Map}
/// @prop {Map} hover-background [color: ('primary', 400)] - The hover background color of the indigo icon button.
/// @prop {Map} focus-hover-background [color: ('primary', 400)] - The background color on focus hovered state of the icon button.
/// @prop {Map} focus-border-color [contrast-color: ('primary', 400, .5)] - The focus border color of the indigo icon button.
/// @prop {Map} active-background [color: ('primary', 400)] - The active background color of the indigo contained icon button.
/// @requires {Map} $indigo-contained-icon-button
$indigo-contained-icon-button-dark: extend(
    $indigo-contained-icon-button,
    $indigo-base-icon-button-dark,
    (
        hover-background: (
            color: (
                'primary',
                400,
            ),
        ),
        focus-hover-background: (
            color: (
                'primary',
                400,
            ),
        ),
        focus-border-color: (
            color: (
                'primary',
                400,
                0.5,
            ),
        ),
        active-background: (
            color: (
                'primary',
                400,
            ),
        ),
        _meta: (
            theme: 'indigo',
            variant: 'dark',
            type: 'contained',
        ),
    )
);

/// Generates a dark indigo icon button schema.
/// @type {Map}
/// @requires {Map} $indigo-flat-icon-button-dark
/// @requires {Map} $indigo-outlined-icon-button-dark
/// @requires {Map} $indigo-contained-icon-button-dark
$dark-indigo-icon-button: (
    flat: $indigo-flat-icon-button-dark,
    outlined: $indigo-outlined-icon-button-dark,
    contained: $indigo-contained-icon-button-dark,
);