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

// stylelint-disable max-line-length

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

/// @type {Map}
/// @prop {Map} disabled-background [color: ('gray', 100)] - The disabled background color of the button.
/// @prop {Map} disabled-foreground [color: ('gray', 500)] - The disabled foreground color of the button.
/// @prop {Map} disabled-icon-color [color: ('gray', 500)] - The disabled icon color of the button.
$material-base-button-dark: (
    disabled-background: (
        color: (
            'gray',
            100,
        ),
    ),
    disabled-foreground: (
        color: (
            'gray',
            500,
        ),
    ),
    disabled-icon-color: (
        color: (
            'gray',
            500,
        ),
    ),
);

/// @type {Map}
/// @prop {Color} disabled-background [transparent] - The disabled background color a flat button.
/// @requires {Map} $material-base-button-dark
/// @requires {Map} $material-flat-button
$material-flat-button-dark: extend(
    $material-flat-button,
    $material-base-button-dark,
    (
        disabled-background: transparent,
        _meta: (
            theme: 'material',
            variant: 'dark',
            type: 'flat',
        ),
    )
);

/// @requires {Map} $material-outlined-button
/// @requires {Map} $material-base-button-dark
/// @prop {Map} disabled-border-color [color: ('gray', 300)] - The disabled focused border color of an outlined button.
/// @prop {Color} disabled-background [transparent] - The disabled background color an outlined button.
$material-outlined-button-dark: extend(
    $material-outlined-button,
    $material-base-button-dark,
    (
        disabled-border-color: (
            color: (
                'gray',
                300,
            ),
        ),
        disabled-background: transparent,
        _meta: (
            theme: 'material',
            variant: 'dark',
            type: 'outlined',
        ),
    )
);

/// @requires {Map} $material-contained-button
/// @requires {Map} $material-base-button-dark
$material-contained-button-dark: extend(
    $material-contained-button,
    $material-base-button-dark,
    (
        _meta: (
            theme: 'material',
            variant: 'dark',
            type: 'contained',
        ),
    )
);

/// @requires {Map} $material-fab-button
/// @requires {Map} $material-base-button-dark
$material-fab-button-dark: extend(
    $material-fab-button,
    $material-base-button-dark,
    (
        _meta: (
            theme: 'material',
            variant: 'dark',
            type: 'fab',
        ),
    )
);

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

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

/// @type {Map}
/// @prop {Color} disabled-background [transparent] - The disabled background color an outlined button.
/// @requires {Map} $fluent-flat-button
/// @requires {Map} $fluent-base-button-dark
$fluent-flat-button-dark: extend(
    $fluent-flat-button,
    $fluent-base-button-dark,
    (
        disabled-background: transparent,
        _meta: (
            theme: 'fluent',
            variant: 'dark',
            type: 'flat',
        ),
    )
);

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

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

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

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

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

/// @type {Map}
/// @prop {Map} foreground [contrast-color: ('primary', 500)] - The idle text color of the button.
/// @prop {Map} icon-color [contrast-color: ('primary', 500, 0.8)] - The idle icon color of the button.
/// @prop {Map} icon-color-hover [contrast-color: ('primary', 500)] - The hover icon color of the button.
/// @prop {Map} hover-foreground [contrast-color: ('primary', 500)] - The hover text color of the button.
/// @prop {Map} focus-foreground [contrast-color: ('primary', 500)] - The text color of the button when focused with click and keyboard.
/// @prop {Map} focus-hover-foreground [contrast-color: ('primary', 500)] - The text color on focus hovered state of the button.
/// @prop {Map} active-foreground [contrast-color: ('primary', 500)] - The active text color of the button.
/// @prop {Map} focus-visible-foreground [contrast-color: ('primary', 500)] - The focus-visible text color of the button.
/// @prop {Map} disabled-foreground [contrast-color: ('primary', 500, 0.20)] - The disabled foreground color of the button.
/// @prop {Map} disabled-icon-color [contrast-color: ('primary', 500, 0.30)] - The disabled icon color of the button.
$indigo-base-button-dark: (
    foreground: (
        contrast-color: (
            'primary',
            500,
        ),
    ),
    icon-color: (
        contrast-color: (
            'primary',
            500,
            0.8,
        ),
    ),
    icon-color-hover: (
        contrast-color: (
            'primary',
            500,
        ),
    ),
    hover-foreground: (
        contrast-color: (
            'primary',
            500,
        ),
    ),
    focus-foreground: (
        contrast-color: (
            'primary',
            500,
        ),
    ),
    focus-hover-foreground: (
        contrast-color: (
            'primary',
            500,
        ),
    ),
    active-foreground: (
        contrast-color: (
            'primary',
            500,
        ),
    ),
    focus-visible-foreground: (
        contrast-color: (
            'primary',
            500,
        ),
    ),
    disabled-foreground: (
        contrast-color: (
            'primary',
            500,
            0.2,
        ),
    ),
    disabled-icon-color: (
        contrast-color: (
            'primary',
            500,
            0.2,
        ),
    ),
);

/// @type {Map}
/// @prop {Map} hover-background [contrast-color: ('primary', 500, 0.1)] - The hover background color of a flat button.
/// @prop {Map} focus-hover-background [contrast-color: ('primary', 500, 0.1] - The background color on focus hovered state of a flat button.
/// @prop {Map} focus-background [contrast-color: ('primary', 500, 0.1)] - The background color of a flat button when focused with click and keyboard.
/// @prop {Map} active-background [contrast-color: ('primary', 500, 0.1)] - The active background color of a flat button.
/// @prop {Map} shadow-color [contrast-color: ('primary', 500, 0.2)] - The shadow color of a flat button.
/// @requires {Map} $indigo-flat-button
/// @requires {Map} $indigo-base-button-dark
$indigo-flat-button-dark: extend(
    $indigo-flat-button,
    $indigo-base-button-dark,
    (
        hover-background: (
            contrast-color: (
                'primary',
                500,
                0.1,
            ),
        ),
        focus-hover-background: (
            contrast-color: (
                'primary',
                500,
                0.1,
            ),
        ),
        focus-background: (
            contrast-color: (
                'primary',
                500,
                0.1,
            ),
        ),
        active-background: (
            contrast-color: (
                'primary',
                500,
                0.1,
            ),
        ),
        shadow-color: (
            contrast-color: (
                'primary',
                500,
                0.2,
            ),
        ),
        _meta: (
            theme: 'indigo',
            variant: 'dark',
            type: 'flat',
        ),
    )
);

/// @type {Map}
/// @prop {Map} border-color [contrast-color: ('primary', 500, 0.6)] - The border color of an outlined button.
/// @prop {Map} hover-background [contrast-color: ('primary', 500, 0.1)] - The hover background color of an outlined button.
/// @prop {Map} hover-border-color [contrast-color: ('primary', 500, 0.8)] - The hover border color of an outlined button.
/// @prop {Map} focus-hover-background [contrast-color: ('primary', 500, 0.1)] - The background color on focus hovered state of an outlined button.
/// @prop {Map} focus-background [contrast-color: ('primary', 500, 0.1)] - The background color of an outlined button when focused with click and keyboard.
/// @prop {Map} focus-border-color [contrast-color: ('primary', 500, 0.6)] - The focus border color of an outlined button.
/// @prop {Map} focus-visible-border-color [contrast-color: ('primary', 500, 0.6)] - The focus-visible border color of an outlined button.
/// @prop {Map} active-background [contrast-color: ('primary', 500, 0.1)] - The active background color of an outlined button.
/// @prop {Map} active-border-color [contrast-color: ('primary', 500, 0.8)] - The active border color of an outlined button.
/// @prop {Map} shadow-color [contrast-color: ('primary', 500, 0.2)] - The shadow color of an outlined button.
/// @prop {Map} disabled-border-color [contrast-color: ('primary', 500, 0.2)] - The disabled focused border color of an outlined button.
/// @requires {Map} $indigo-outlined-button
/// @requires {Map} $indigo-base-button-dark
$indigo-outlined-button-dark: extend(
    $indigo-outlined-button,
    $indigo-base-button-dark,
    (
        border-color: (
            contrast-color: (
                'primary',
                500,
                0.6,
            ),
        ),
        hover-background: (
            contrast-color: (
                'primary',
                500,
                0.1,
            ),
        ),
        hover-border-color: (
            contrast-color: (
                'primary',
                500,
                0.8,
            ),
        ),
        focus-hover-background: (
            contrast-color: (
                'primary',
                500,
                0.1,
            ),
        ),
        focus-background: (
            contrast-color: (
                'primary',
                500,
                0.1,
            ),
        ),
        focus-border-color: (
            contrast-color: (
                'primary',
                500,
                0.6,
            ),
        ),
        focus-visible-border-color: (
            contrast-color: (
                'primary',
                500,
                0.6,
            ),
        ),
        active-background: (
            contrast-color: (
                'primary',
                500,
                0.1,
            ),
        ),
        active-border-color: (
            contrast-color: (
                'primary',
                500,
                0.8,
            ),
        ),
        shadow-color: (
            contrast-color: (
                'primary',
                500,
                0.2,
            ),
        ),
        disabled-border-color: (
            contrast-color: (
                'primary',
                500,
                0.2,
            ),
        ),
        _meta: (
            theme: 'indigo',
            variant: 'dark',
            type: 'outlined',
        ),
    )
);

/// @type {Map}
/// @requires {Map} $indigo-contained-button
/// @requires {Map} $indigo-base-button-dark
$indigo-contained-button-dark: extend(
    $indigo-contained-button,
    $indigo-base-button-dark,
    (
        _meta: (
            theme: 'indigo',
            variant: 'dark',
            type: 'contained',
        ),
    )
);

/// @type {Map}
/// @requires {Map} $indigo-fab-button
/// @requires {Map} $indigo-base-button-dark
$indigo-fab-button-dark: extend(
    $indigo-fab-button,
    $indigo-base-button-dark,
    (
        _meta: (
            theme: 'indigo',
            variant: 'dark',
            type: 'fab',
        ),
    )
);

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