@import '../shape/button-group';
@import '../elevation/button-group';

////
/// @group schemas
/// @access private
/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
////

/// Generates a light button group schema.
/// @type {Map}
/// @prop {map} item-text-color [igx-color: ('grays', 700)]- The text color for button group items.
/// @prop {Color} item-background [#fff] - The background color for button group items .
/// @prop {Color} item-border-color [transparent] - The border color between button group items.
///
/// @prop {map} item-hover-text-color [igx-color: ('grays', 800)] - The hover text color for button group items.
/// @prop {map} item-hover-background [igx-color: ('grays', 400)] - The hover background color for button group items.
///
/// @prop {map} disabled-text-color [igx-color: ('grays', 400)]- The text/icon color for a disabled item in the button group.
/// @prop {map} disabled-background-color [igx-color: ('grays', 100)] - The background color for a disabled item in the button group.
///
/// @prop {map} item-selected-text-color [igx-color: ('grays', 800)]- The text color for a selected item in the button group.
/// @prop {map} item-selected-background [igx-color: ('grays', 400)] - The background color for a selected item in the button group.
/// @prop {map} item-selected-border-color [igx-color: ('grays', 600), rgba: .12] - The border color for a selected item from the button group.
/// @prop {map} item-selected-hover-background [igx-color: ('grays', 500)] - The background color for a selected item in hover or focus state in the button group.
/// @prop {Number} elevation [2] - The elevation level, between 0-24, to be used for the badge shadow.
/// @prop {Number} border-radius [.2] - The border radius fraction, between 0-1 to be used for button-group component.
/// @requires {function} extend
/// @requires {map} $_default-shape-button-group
/// @requires {map} $_default-elevation-button-group
/// @see $default-palette
$_light-button-group: extend(
    $_default-shape-button-group,
    $_default-elevation-button-group,
    (
        item-background: #fff,

        item-border-color: (
            igx-color: ('grays', 50),
            hexrgba: (#ccc)
        ),

        item-text-color: (
            igx-color: ('grays', 700)
        ),

        item-hover-text-color: (
            igx-color: ('grays', 800)
        ),

        item-hover-background: (
            igx-color: ('grays', 300)
        ),

        item-selected-text-color: (
            igx-color: ('grays', 800)
        ),

        item-selected-background: (
            igx-color: ('grays', 400)
        ),

        item-selected-hover-background: (
            igx-color: ('grays', 500)
        ),

        item-selected-border-color: (
            igx-color: ('grays', 400),
            hexrgba: (#ccc)
        ),

        disabled-text-color: (
            igx-color: ('grays', 400)
        ),

        disabled-background-color: (
            igx-color: ('grays', 50)
        ),

        item-disabled-border: (
            igx-color: ('grays', 50),
            hexrgba: (#ccc)
        ),
    )
);

/// Generates a fluent button group schema.
/// @type {Map}
/// @prop {map} item-text-color [igx-color: ('grays', 900)]- The text color for button group items.
///
/// @prop {map} item-hover-text-color [igx-color: ('primary', 200)] - The hover text color for button group items.
/// @prop {map} item-hover-background [transparent] - The hover background color for button group items.
/// @prop {map} item-selected-background [igx-color: ('grays', 100)] - The background color for a selected item in the button group.
/// @prop {map} item-selected-hover-background [igx-color: ('grays', 100)] - The background color for a selected item in hover or focus state in the button group.
/// @prop {map} item-selected-text-color [igx-color: ('primary', 200)]- The text color for a selected item in the button group.
/// @prop {Color} disabled-background-color [transparent] - The background color for a disabled item in the button group.
///
/// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the badge shadow.
/// @prop {Number} border-radius [2px] - The border radius fraction, between 0-1 to be used for button-group component.
///
/// @requires {function} extend
/// @requires {map} $_light-button-group
/// @requires {map} $_fluent-shape-button-group
/// @requires {map} $_fluent-elevation-button-group
$_fluent-button-group: extend(
    $_light-button-group,
    $_fluent-shape-button-group,
    $_fluent-elevation-button-group,
    (
        item-text-color: (
            igx-color: ('grays', 900)
        ),

        item-hover-text-color: (
            igx-color: ('primary', 200)
        ),

        item-hover-background: transparent,

        item-selected-background: (
            igx-color: ('grays', 100)
        ),

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

        item-selected-text-color: (
            igx-color: ('primary', 200)
        ),

        disabled-background-color: transparent,
    )
);