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

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

/// Generates the base dark button-group schema.
/// @type Map
/// @prop {Map} item-border-color [color: ('gray', 100)] - The border color between button group items.
/// @prop {Map} item-hover-border-color [color: ('gray', 200)] - The hover border color between button group items.
/// @prop {Map} item-focused-border-color [color: ('gray', 200)] - The focused border color for an item from the button group.
/// @prop {Map} item-focused-hover-border-color [color: ('gray', 300)] - The focused & hover border color for an item from the button group.
/// @prop {Map} item-selected-background [color: ('gray', 100)] - The background color for a selected item in the button group.
/// @prop {Map} item-selected-focus-background [color: ('gray', 100)] - The background color for a selected item in focus state in the button group.
/// @prop {Map} item-selected-hover-background [color: ('gray', 300, .8)] - The hover background color for a selected item in hover or focus state in the button group.
/// @prop {Map} item-selected-focus-hover-background [color: ('gray', 200)] - The background color for a selected item in focused & hover state in the button group.
/// @prop {Map} item-selected-border-color [color: ('gray', 300)] - The border color for button group selected items.
/// @prop {Map} item-selected-hover-border-color [color: ('gray', 500)] - The hover border color for button group selected items.
/// @prop {Map} item-active-border-color [color: ('gray', 100)] - The active border color for button group items.
/// @prop {Map} item-disabled-border [color: ('gray', 100)] - The border color for a disabled item in the button group.
/// @prop {Map} disabled-selected-border-color [color: ('gray', 100)] - The disabled border color for a selected item from the button group.
$base-dark-button-group: (
    item-border-color: (
        color: (
            'gray',
            100,
        ),
    ),

    item-hover-border-color: (
        color: (
            'gray',
            200,
        ),
    ),

    item-focused-border-color: (
        color: (
            'gray',
            200,
        ),
    ),

    item-focused-hover-border-color: (
        color: (
            'gray',
            300,
        ),
    ),

    item-selected-background: (
        color: (
            'gray',
            100,
        ),
    ),

    item-selected-focus-background: (
        color: (
            'gray',
            100,
        ),
    ),

    item-selected-hover-background: (
        color: (
            'gray',
            300,
            0.8,
        ),
    ),

    item-selected-focus-hover-background: (
        color: (
            'gray',
            200,
        ),
    ),

    item-selected-border-color: (
        color: (
            'gray',
            300,
        ),
    ),

    item-selected-hover-border-color: (
        color: (
            'gray',
            500,
        ),
    ),

    item-active-border-color: (
        color: (
            'gray',
            100,
        ),
    ),

    item-disabled-border: (
        color: (
            'gray',
            100,
        ),
    ),

    disabled-selected-border-color: (
        color: (
            'gray',
            100,
        ),
    ),

    _meta: (
        name: 'button-group',
        variant: 'dark',
    ),
);

/// Generates a dark material button-group schema based on a mix of $light-button-group and $base-dark-button-group
/// @type Map
/// @prop {Map} item-hover-background [color: ('gray', 100)] - The background color for button group items on hover.
/// @prop {Map} item-focused-background [color: ('gray', 100)] - The focused background color for button group items.
/// @prop {Map} item-focused-hover-background [color: ('gray', 100)] - The focused & hover background color for button group items.
/// @prop {Map} item-selected-hover-background [color: ('gray', 100)] - The background color for a selected item in hover state in the button group.
/// @prop {Map} item-active-background [color: ('gray', 200)] - The active background color for button group items.
/// @prop {Map} item-selected-active-background [color: ('gray', 200)] - The active background color for a selected item in the button group.
/// @prop {Map} item-selected-active-border-color [color: ('gray', 500)] - The active border color for a selected item in the button group.
/// @prop {Map} disabled-selected-background [color: ('gray', 50)] - The disabled background color for a selected item in the button group.
/// @prop {Map} disabled-selected-text-color [color: ('gray', 200)] - The disabled text color for a selected item in the button group.
/// @prop {Map} disabled-selected-icon-color [color: ('gray', 200)] - The disabled icon color for a selected item in the button group.
/// @requires $material-button-group
/// @requires $base-dark-button-group
$dark-material-button-group: extend(
    $material-button-group,
    $base-dark-button-group,
    (
        item-hover-background: (
            color: (
                'gray',
                100,
            ),
        ),

        item-focused-background: (
            color: (
                'gray',
                100,
            ),
        ),

        item-focused-hover-background: (
            color: (
                'gray',
                100,
            ),
        ),

        item-selected-hover-background: (
            color: (
                'gray',
                100,
            ),
        ),

        item-active-background: (
            color: (
                'gray',
                200,
            ),
        ),

        item-selected-active-background: (
            color: (
                'gray',
                200,
            ),
        ),

        item-selected-active-border-color: (
            color: (
                'gray',
                500,
            ),
        ),

        disabled-selected-background: (
            color: (
                'gray',
                50,
            ),
        ),

        disabled-selected-text-color: (
            color: (
                'gray',
                200,
            ),
        ),

        disabled-selected-icon-color: (
            color: (
                'gray',
                200,
            ),
        ),
    )
);

/// Generates a dark fluent button-group schema based on a mix of $fluent-button-group and $base-dark-button-group
/// @type Map
/// @prop {Map} item-border-color [color: ('gray', 400)] - The border color for button group items.
/// @prop {Map} item-hover-border-color [color: ('gray', 400)] - The hover border color between button group items.
/// @prop {Map} item-focused-border-color [color: ('gray', 400)] - The focused border color for button group items.
/// @prop {Map} item-focused-hover-border-color [color: ('gray', 400)] - The focused & hover border color for button group items.
/// @prop {Map} item-hover-background [color: ('gray', 50)] - The background color for button group items on hover.
/// @prop {Map} item-focused-hover-background [color: ('gray', 50)] - The focused & hover background color for button group items.
/// @prop {Map} item-selected-border-color [color: ('gray', 600)] - The border color for button group selected items.
/// @prop {Map} item-selected-hover-background [color: ('gray', 100)] - The background color for a selected item in hover or focus state in the button group.
/// @prop {Map} item-selected-hover-border-color [color: ('gray', 600)] - The border color for a selected item in hover state in the button group.
/// @prop {Map} item-active-background [color: ('gray', 100)] - The active background color for button group items.
/// @prop {Map} item-active-border-color [color: ('gray', 400)] - The active border color for button group items.
/// @prop {Map} item-selected-active-background [color: ('gray', 300)] - The active background color for a selected item in the button group.
/// @prop {Map} item-selected-active-border-color [color: ('gray', 600)] - The active border color for a selected item in the button group.
/// @prop {Map} item-disabled-border [color: ('gray', 400)] - The border color for button group disabled items.
/// @prop {Map} disabled-text-color [color: ('gray', 300)]- The text/icon color for a disabled item in the button group.
/// @prop {Map} disabled-selected-background [color: ('gray', 100)] - The disabled background color for a selected item in the button group.
/// @prop {Map} disabled-selected-text-color [color: ('gray', 300)] - The disabled text color for a selected item in the button group.
/// @prop {Map} disabled-selected-icon-color [color: ('gray', 300)] - The disabled icon color for a selected item in the button group.
/// @prop {Map} disabled-selected-border-color [color: ('gray', 400)] - The disabled border color for a selected item from the button group.
/// @requires $fluent-button-group
/// @requires $base-dark-button-group
$dark-fluent-button-group: extend(
    $fluent-button-group,
    $base-dark-button-group,
    (
        item-border-color: (
            color: (
                'gray',
                400,
            ),
        ),

        item-hover-border-color: (
            color: (
                'gray',
                400,
            ),
        ),

        item-focused-border-color: (
            color: (
                'gray',
                400,
            ),
        ),

        item-focused-hover-border-color: (
            color: (
                'gray',
                400,
            ),
        ),

        item-hover-background: (
            color: (
                'gray',
                50,
            ),
        ),

        item-focused-hover-background: (
            color: (
                'gray',
                50,
            ),
        ),

        item-selected-border-color: (
            color: (
                'gray',
                600,
            ),
        ),

        item-selected-hover-background: (
            color: (
                'gray',
                200,
            ),
        ),

        item-selected-hover-border-color: (
            color: (
                'gray',
                600,
            ),
        ),

        item-active-background: (
            color: (
                'gray',
                100,
            ),
        ),

        item-active-border-color: (
            color: (
                'gray',
                400,
            ),
        ),

        item-selected-active-background: (
            color: (
                'gray',
                300,
            ),
        ),

        item-selected-active-border-color: (
            color: (
                'gray',
                600,
            ),
        ),

        item-disabled-border: (
            color: (
                'gray',
                400,
            ),
        ),

        disabled-text-color: (
            color: (
                'gray',
                300,
            ),
        ),

        disabled-selected-background: (
            color: (
                'gray',
                100,
            ),
        ),

        disabled-selected-text-color: (
            color: (
                'gray',
                300,
            ),
        ),

        disabled-selected-icon-color: (
            color: (
                'gray',
                300,
            ),
        ),

        disabled-selected-border-color: (
            color: (
                'gray',
                400,
            ),
        ),
    )
);

/// Generates a dark bootstrap button-group schema based on a mix of $bootstrap-button-group
/// @type Map
/// @requires $bootstrap-button-group
$dark-bootstrap-button-group: extend(
    $bootstrap-button-group,
    (
        _meta: (
            variant: 'dark',
        ),
    )
);

/// Generates a dark indigo button-group schema
/// @type Map
/// @prop {Map} item-background [contrast-color: ('gray', 50, .05)] - The background color for button group items.
/// @prop {Map} item-text-color [contrast-color: ('gray', 50, .8)] - The text color for button group items.
/// @prop {Map} item-icon-color [contrast-color: ('gray', 50, .8)] - The icon color for button group items.
/// @prop {Map} item-border-color [color: ('gray', 100)] - The border color between button group items.
/// @prop {Map} idle-shadow-color [contrast-color: ('gray', 50, .2)] - The outline color of button group items.
/// @prop {Map} item-hover-background [contrast-color: ('gray', 50, .1)] - The hover background color for button group items.
/// @prop {Map} item-hover-text-color [contrast-color: ('gray', 50)] - The hover text color for button group items.
/// @prop {Map} item-hover-icon-color [contrast-color: ('gray', 50)] - The hover icon color for button group items.
/// @prop {Map} item-hover-border-color [color: ('gray', 200)] - The hover border color between button group items.
/// @prop {Map} item-focused-border-color [color: ('gray', 100)] - The focused border color for an item from the button group.
/// @prop {Map} item-focused-text-color [contrast-color: ('gray', 50, .8)] - The focused text color for button group items.
/// @prop {Map} item-focused-background [contrast-color: ('gray', 50, .05)] - The focused background color for button group items.
/// @prop {Map} item-focused-hover-background [contrast-color: ('gray', 50, .1)] - The focused & hover background color for button group items.
/// @prop {Map} item-focused-hover-border-color [color: ('gray', 200)] - The focused & hover border color for an item from the button group.
/// @prop {Map} item-focused-hover-text-color [contrast-color: ('gray', 50)] - The focused & hover text color for button group items.
/// @prop {Map} item-active-background [contrast-color: ('gray', 50, .1)] - The active background color for button group items.
/// @prop {Map} item-active-border-color [color: ('gray', 200)] - The active border color for button group items.
/// @prop {Color} disabled-background-color [transparent] - The background color for a disabled item in the button group.
/// @prop {Map} disabled-text-color [contrast-color: ('gray', 50, .2)] - The text/icon color for a disabled item in the button group.
/// @prop {Map} item-disabled-border [color: ('gray', 50)] - The border color for a disabled item in the button group.
/// @prop {Map} disabled-selected-text-color [contrast-color: ('primary', 500, .2)] - The disabled text color for a selected item in the button group.
/// @prop {Map} disabled-selected-icon-color [contrast-color: ('primary', 500, .2)] - The disabled icon color for a selected item in the button group.
/// @requires $indigo-button-group
$dark-indigo-button-group: extend(
    $indigo-button-group,
    (
        item-background: (
            contrast-color: (
                'gray',
                50,
                0.05,
            ),
        ),

        item-text-color: (
            contrast-color: (
                'gray',
                50,
                0.8,
            ),
        ),

        item-icon-color: (
            contrast-color: (
                'gray',
                50,
                0.8,
            ),
        ),

        item-border-color: (
            color: (
                'gray',
                100,
            ),
        ),

        idle-shadow-color: (
            contrast-color: (
                'gray',
                50,
                0.2,
            ),
        ),

        item-hover-background: (
            contrast-color: (
                'gray',
                50,
                0.1,
            ),
        ),

        item-hover-text-color: (
            contrast-color: (
                'gray',
                50,
            ),
        ),

        item-hover-icon-color: (
            contrast-color: (
                'gray',
                50,
            ),
        ),

        item-hover-border-color: (
            color: (
                'gray',
                200,
            ),
        ),

        item-focused-border-color: (
            color: (
                'gray',
                100,
            ),
        ),

        item-focused-text-color: (
            contrast-color: (
                'gray',
                50,
                0.8,
            ),
        ),

        item-focused-background: (
            contrast-color: (
                'gray',
                50,
                0.05,
            ),
        ),

        item-focused-hover-background: (
            contrast-color: (
                'gray',
                50,
                0.1,
            ),
        ),

        item-focused-hover-border-color: (
            color: (
                'gray',
                200,
            ),
        ),

        item-focused-hover-text-color: (
            contrast-color: (
                'gray',
                50,
            ),
        ),

        item-active-background: (
            contrast-color: (
                'gray',
                50,
                0.1,
            ),
        ),

        item-active-border-color: (
            color: (
                'gray',
                200,
            ),
        ),

        disabled-background-color: transparent,

        disabled-text-color: (
            contrast-color: (
                'gray',
                50,
                0.2,
            ),
        ),

        item-disabled-border: (
            color: (
                'gray',
                50,
            ),
        ),

        disabled-selected-text-color: (
            contrast-color: (
                'primary',
                500,
                0.2,
            ),
        ),

        disabled-selected-icon-color: (
            contrast-color: (
                'primary',
                500,
                0.2,
            ),
        ),
        _meta: (
            variant: 'dark',
        ),
    )
);