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

// stylelint-disable max-line-length

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

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

/// @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.
$material-base-button-dark: extend(
    $dark-base-button,
    (
        disabled-background: (
            color: (
                'gray',
                100,
            ),
        ),
        disabled-foreground: (
            color: (
                'gray',
                500,
            ),
        ),
    )
);

/// @type Map
/// @prop {Map} hover-foreground [color: ('secondary', 300)] - The hover text color of a flat button.
/// @prop {Map} focus-foreground [color: ('secondary', 200)] - The text color of a flat button when focused with click and keyboard.
/// @prop {Map} focus-hover-foreground [color: ('secondary', 300)] - The text color on focus hovered state of the button.
/// @prop {Map} focus-visible-foreground [color: ('secondary', 300)] - The focus-visible text color of a flat button.
/// @prop {Map} active-foreground [color: ('secondary', 300)] - The active text color of a flat button.
/// @prop {Color} disabled-background [transparent] - The disabled background color a flat button.
/// @requires $material-base-button-dark
/// @requires $material-flat-button
$material-flat-button-dark: extend(
    $material-flat-button,
    $material-base-button-dark,
    (
        hover-foreground: (
            color: (
                'secondary',
                300,
            ),
        ),
        focus-foreground: (
            color: (
                'secondary',
                200,
            ),
        ),
        focus-hover-foreground: (
            color: (
                'secondary',
                300,
            ),
        ),
        focus-visible-foreground: (
            color: (
                'secondary',
                300,
            ),
        ),
        active-foreground: (
            color: (
                'secondary',
                300,
            ),
        ),
        disabled-background: transparent,
    )
);

/// @type Map
/// @prop {Map} hover-foreground [color: ('secondary', 300)] - The hover text color of a flat button.
/// @prop {Map} focus-foreground [color: ('secondary', 200)] - The text color of a flat button when focused with click and keyboard.
/// @prop {Map} focus-hover-foreground [color: ('secondary', 300)] - The text color on focus hovered state of the button.
/// @prop {Map} focus-visible-foreground [color: ('secondary', 300)] - The focus-visible text color of a flat button.
/// @prop {Map} active-foreground [color: ('secondary', 300)] - The active text color of a flat button.
/// @prop {Map} hover-border-color [color: ('secondary', 300)] - The hover border color of an outlined button.
/// @prop {Map} focus-border-color [color: ('secondary', 200)] - The focus border color of an outlined button.
/// @prop {Map} focus-visible-border-color [color: ('secondary', 300)] - The focus-visible border color of an outlined button.
/// @prop {Map} active-border-color [color: ('secondary', 300)] - The active border color of an outlined button.
/// @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.
/// @requires $material-outlined-button
/// @requires $material-base-button-dark
$material-outlined-button-dark: extend(
    $material-outlined-button,
    $material-base-button-dark,
    (
        hover-foreground: (
            color: (
                'secondary',
                300,
            ),
        ),
        focus-foreground: (
            color: (
                'secondary',
                200,
            ),
        ),
        focus-hover-foreground: (
            color: (
                'secondary',
                300,
            ),
        ),
        focus-visible-foreground: (
            color: (
                'secondary',
                300,
            ),
        ),
        active-foreground: (
            color: (
                'secondary',
                300,
            ),
        ),
        hover-border-color: (
            color: (
                'secondary',
                300,
            ),
        ),
        focus-border-color: (
            color: (
                'secondary',
                200,
            ),
        ),
        focus-visible-border-color: (
            color: (
                'secondary',
                300,
            ),
        ),
        active-border-color: (
            color: (
                'secondary',
                300,
            ),
        ),
        disabled-border-color: (
            color: (
                'gray',
                300,
            ),
        ),
        disabled-background: transparent,
    )
);

/// @requires $material-contained-button
/// @requires $material-base-button-dark
$material-contained-button-dark: extend($material-contained-button, $material-base-button-dark);

/// @requires $material-fab-button
/// @requires $material-base-button-dark
$material-fab-button-dark: extend($material-fab-button, $material-base-button-dark);

/// Generates a dark material button schema.
/// @type Map
/// @requires $material-flat-button-dark
/// @requires $material-outlined-button-dark
/// @requires $material-contained-button-dark
/// @requires $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.
$fluent-base-button-dark: extend(
    $dark-base-button,
    (
        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,
            ),
        ),
    )
);

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

/// @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 $fluent-outlined-button
/// @requires $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,
            ),
        ),
    )
);

/// @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} 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 $fluent-contained-button
/// @requires $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,
            ),
        ),
        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,
            ),
        ),
    )
);

/// @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} 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 $fluent-fab-button
/// @requires $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,
            ),
        ),
        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,
            ),
        ),
    )
);

/// Generates a dark fluent button schema.
/// @type Map
/// @requires $fluent-flat-button-dark
/// @requires $fluent-outlined-button-dark
/// @requires $fluent-contained-button-dark
/// @requires $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,
);

/// @type Map
/// @requires $bootsrap-flat-button
$bootstrap-flat-button-dark: extend($bootstrap-flat-button, $dark-base-button);

/// @type Map
/// @requires $bootsrap-outlined-button
$bootstrap-outlined-button-dark: extend($bootstrap-outlined-button, $dark-base-button);

/// @type Map
/// @requires $bootsrap-contained-button
$bootstrap-contained-button-dark: extend($bootstrap-contained-button, $dark-base-button);

/// @type Map
/// @requires $bootsrap-fab-button
$bootstrap-fab-button-dark: extend($bootstrap-fab-button, $dark-base-button);

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

/// @type Map
/// @prop {Map} foreground [contrast-color: ('primary', 500)] - The idle text color of the button.
/// @prop {Color} icon-color [hsl(from currentColor h s l / 0.8)] - The idle icon color of the button. Slightly translucent to match the light schema treatment.
/// @prop {Color} icon-color-hover ['currentColor'] - 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.
$indigo-base-button-dark: extend(
    $dark-base-button,
    (
        foreground: (
            contrast-color: (
                'primary',
                500,
            ),
        ),
        icon-color: 'hsl(from currentColor h s l / 0.8)',
        icon-color-hover: 'currentColor',
        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,
            ),
        ),
    )
);

/// @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 $indigo-flat-button
/// @requires $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,
            ),
        ),
    )
);

/// @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.8)] - 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 $indigo-outlined-button
/// @requires $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.8,
            ),
        ),
        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,
            ),
        ),
    )
);

/// @type Map
/// @requires $indigo-contained-button
/// @requires $indigo-base-button-dark
$indigo-contained-button-dark: extend($indigo-contained-button, $indigo-base-button-dark);

/// @type Map
/// @requires $indigo-fab-button
/// @requires $indigo-base-button-dark
$indigo-fab-button-dark: extend($indigo-fab-button, $indigo-base-button-dark);

/// Generates a dark indigo button schema.
/// @type Map
/// @requires $indigo-flat-button
/// @requires $indigo-outlined-button
/// @requires $indigo-contained-button
/// @requires $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,
);