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

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

/// Generates a light button schema.
/// @type {Map}
/// @prop {String} button-roundness [4px]- The edge roundness (border-radius) for flat and raised buttons.
/// @prop {Color} flat-background [transparent] - The background color of a flat button.
/// @prop {Map} flat-text-color [igx-color: ('secondary', 500)] - The idle text color of a flat button.
/// @prop {Map} flat-hover-background [igx-color: ('secondary', 500), rgba: .05 ] - The hover background color of a flat button.
/// @prop {Map} flat-hover-text-color [igx-color: ('secondary', 500)] - The hover text color of a flat button.
/// @prop {Map} flat-focus-background [igx-color: ('secondary', 400), rgba: .12] - The focus background color of a flat button.
/// @prop {Map} flat-focus-text-color [igx-color: ('secondary', 500)] - The focus text color of a flat button.
/// @prop {Color} flat-icon-color [currentColor] - The color of a flat button icon.
/// @prop {Color} flat-hover-icon-color [currentColor] - The hover color of a flat button icon.
/// @prop {Color} flat-focus-icon-color [currentColor] - The focus color of a flat button icon.
///
/// @prop {Map} outlined-text-color [igx-color: ('secondary', 500)] - The idle text color of an outlined button.
/// @prop {Map} outlined-outline-color [igx-color: ('grays', 300)] - The border color of an outlined button.
/// @prop {Map} outlined-disabled-outline-color [igx-color: ('grays', 300)] - The border color of an outlined button.
/// @prop {Color} outlined-hover-background [igx-color: ('secondary', 500), rgba: .05] - The hover background color of an outlined button.
/// @prop {Map} outlined-hover-text-color [igx-color: ('secondary', 500)] - The hover text color of an outlined button.
/// @prop {Map} outlined-focus-background [igx-color: ('secondary', 400), rgba: .12] - The focus background color of an outlined button.
/// @prop {Map} outlined-focus-text-color [igx-color: ('secondary', 500)] - The focus text color of an outlined button.
/// @prop {Color} outlined-icon-color [currentColor] - The color of a outlined button icon.
/// @prop {Color} outlined-hover-icon-color [currentColor] - The hover color of a outlined button icon.
/// @prop {Color} outlined-focus-icon-color [currentColor] - The focus color of a outlined button icon.
///
/// @prop {Map} raised-background [igx-color: ('secondary', 500)] - The background color of an raised button.
/// @prop {Map} raised-text-color [igx-contrast-color: ('secondary', 500)] - The idle text color of a raised button.
/// @prop {Map} raised-hover-background [igx-color: ('secondary', 300)] - The hover background of a raised button.
/// @prop {Map} raised-hover-text-color [igx-contrast-color: ('secondary', 300)] - The hover text color of a raised button.
/// @prop {Map} raised-focus-background [igx-color: ('secondary', 300)] - The focus background color of a raised button.
/// @prop {Map} raised-focus-text-color [igx-contrast-color: ('secondary', 300)] - The focus text color of a raised button.
/// @prop {Color} raised-icon-color [currentColor] - The color of a raised button icon.
/// @prop {Color} raised-hover-icon-color [currentColor] - The hover color of a raised button icon.
/// @prop {Color} raised-focus-icon-color [currentColor] - The focus color of a raised button icon.
///
/// @prop {Map} fab-background [igx-color: ('secondary', 500)] - The background color of a floating action button.
/// @prop {Map} fab-text-color [igx-contrast-color: ('secondary', 500)] - The text color of a floating action button.
/// @prop {Map} fab-hover-background [igx-color: ('secondary', 300)] - The hover background color of a floating action button.
/// @prop {Map} fab-hover-text-color [igx-contrast-color: ('secondary', 300)] - The hover text color of a floating action button.
/// @prop {Map} fab-focus-background [igx-color: ('secondary', 300)] - The focus background color of floating action button.
/// @prop {Map} fab-focus-text-color [igx-contrast-color: ('secondary', 300)] - The focus text color of a floating action button.
///
/// @prop {Map} icon-color [igx-color: ('grays', 800)] - The icon color of an icon button.
/// @prop {Map} icon-hover-color [igx-color: ('grays', 800)] - The hover icon color of an icon button.
/// @prop {Color} icon-background [transparent] - The background color of the an icon button.
/// @prop {Map} icon-hover-background [igx-color: ('grays', 100)] - The hover background color of an icon button.
/// @prop {Map} icon-focus-color [igx-color: ('grays', 800)] - The focus icon color of an icon button.
/// @prop {Map} icon-focus-background [igx-color: ('grays', 400] - The focus background color an icon button.
/// @prop {Color} disabled-color [igx-color: ('grays', 400)] - The disabled text/icon color of a button.
/// @prop {Color} disabled-background [igx-color: ('grays', 100)] - The disabled background color of raised, fab, or icon buttons.
///
/// @prop {Number} raised-resting-elevation [2] - The elevation level, between 0-24, to be used for the resting state.
/// @prop {Number} raised-hover-elevation [4] - The elevation level, between 0-24, to be used for the hover state.
/// @prop {Number} raised-focus-elevation [8] - The elevation level, between 0-24, to be used for the focus state.
/// @prop {Number} fab-resting-elevation [6] - The elevation level, between 0-24, to be used for the resting state.
/// @prop {Number} fab-hover-elevation [12] - The elevation level, between 0-24, to be used for the hover state.
/// @prop {Number} fab-focus-elevation [12] - The elevation level, between 0-24, to be used for the focus state.
///
/// @prop {Number} flat-border-radius [.2] - The border radius fraction used for flat button.
/// @prop {Number} raised-border-radius [.2] - The border radius fraction used for raised button.
/// @prop {Number} outlined-border-radius [1] - The border radius fraction used for outlined button.
/// @prop {Number} fab-border-radius [1] - The border radius fraction used for fab button.
/// @prop {Number} icon-border-radius [1] - The border radius fraction used for icon button.
/// @requires {function} extend
/// @requires {map} $_default-shape-button
/// @requires {map} $_default-elevation-button
/// @see $default-palette
$_light-button: extend(
    $_default-shape-button,
    $_default-elevation-button,
    (
        variant: 'material',

        flat-background: transparent,

        flat-text-color: (
            igx-color: ('secondary', 500)
        ),

        flat-icon-color: currentColor,
        flat-hover-icon-color: currentColor,
        flat-focus-icon-color: currentColor,

        raised-icon-color: currentColor,
        raised-hover-icon-color: currentColor,
        raised-focus-icon-color: currentColor,

        outlined-icon-color: currentColor,
        outlined-hover-icon-color: currentColor,
        outlined-focus-icon-color: currentColor,

        flat-hover-background: (
            igx-color: ('secondary', 500),
            rgba: .05
        ),

        flat-hover-text-color: (
            igx-color: ('secondary', 500)
        ),

        flat-focus-background: (
            igx-color: ('secondary', 400),
            rgba: .12
        ),

        flat-focus-text-color: (
            igx-color: ('secondary', 500)
        ),

        outlined-background: transparent,

        outlined-outline-color: (
            igx-color: ('grays', 300)
        ),

        outlined-text-color: (
            igx-color: ('secondary', 500)
        ),

        outlined-hover-background: (
            igx-color: ('secondary', 500),
            rgba: .05
        ),

        outlined-hover-text-color: (
            igx-color: ('secondary', 500)
        ),

        outlined-focus-background: (
            igx-color: ('secondary', 400),
            rgba: .12
        ),

        outlined-focus-text-color: (
            igx-color: ('secondary', 500)
        ),

        outlined-disabled-outline-color: (
            igx-color: ('grays', 300)
        ),

        raised-background: (
            igx-color: ('secondary', 500)
        ),

        raised-text-color: (
            igx-contrast-color: ('secondary', 500)
        ),

        raised-hover-background: (
            igx-color: ('secondary', 300)
        ),


        raised-hover-text-color: (
            igx-contrast-color: ('secondary', 300)
        ),

        raised-focus-background: (
            igx-color: ('secondary', 300)
        ),

        raised-focus-text-color: (
            igx-contrast-color: ('secondary', 300)
        ),

        fab-background: (
            igx-color: ('secondary', 500)
        ),

        fab-text-color: (
            igx-contrast-color: ('secondary', 500)
        ),

        fab-hover-background: (
            igx-color: ('secondary', 300)
        ),

        fab-hover-text-color: (
            igx-contrast-color: ('secondary', 300)
        ),

        fab-focus-background: (
            igx-color: ('secondary', 300)
        ),

        fab-focus-text-color: (
            igx-contrast-color: ('secondary', 300)
        ),

        icon-color: (
            igx-color: ('grays', 800)
        ),

        icon-background: transparent,

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

        icon-hover-color: (
            igx-color: ('grays', 800)
        ),

        icon-focus-background: (
            igx-color: ('grays', 400)
        ),

        icon-focus-color: (
            igx-color: ('grays', 800)
        ),

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

        disabled-background: (
            igx-color: ('grays', 100)
        )
    )
);

/// Generates a fluent bottom navigation schema.
/// @type {Map}
/// @prop {Map} flat-text-color [igx-color: ('grays', 900)] - The idle text color of a flat button.
/// @prop {Map} flat-icon-color [igx-color: ('primary', 500)] - The color of a flat button icon.
/// @prop {Map} flat-hover-icon-color [igx-color: ('primary', 500)] - The hover color of a flat button icon.
/// @prop {Map} flat-focus-icon-color [igx-color: ('primary', 500)] - The focus color of a flat button icon.
///
/// @prop {Color} flat-hover-background [transparent] - The hover background color of a flat button.
/// @prop {Map} flat-hover-text-color [igx-color: ('primary', 500)] - The hover text color of a flat button.
/// @prop {Map} flat-focus-background [igx-color:('grays', 100)] - The focus background color of a flat button.
/// @prop {Map} flat-focus-text-color [igx-color: ('primary', 500)] - The focus text color of a flat button.
///
/// @prop {Map} outlined-outline-color [igx-color: ('grays', 800)] - The border color of an outlined button.
/// @prop {Map} outlined-text-color [igx-color: ('grays', 000)] - The idle text color of an outlined button.
/// @prop {Color} outlined-hover-background [igx-color: ('grays', 100)] - The hover background color of an outlined button.
/// @prop {Map} outlined-hover-text-color [igx-color: ('grays', 900)] - The hover text color of an outlined button.
/// @prop {Map} outlined-focus-background [igx-color: ('grays', 100)] - The focus background color of an outlined button.
/// @prop {Map} outlined-focus-text-color [igx-color: ('grays', 900)] - The focus text color of an outlined button.
///
/// @prop {Map} raised-background [igx-color: ('primary', 500)] - The background color of an raised button.
/// @prop {Color} raised-text-color [#fff] - The idle text color of a raised button.
/// @prop {Map} raised-hover-background [igx-color: ('primary', 600)] - The hover background of a raised button.
/// @prop {Color} raised-hover-text-color [#fff] - The hover text color of a raised button.
/// @prop {Map} raised-focus-background [igx-color: ('primary', 600)] - The focus background color of a raised button.
/// @prop {Color} raised-focus-text-color [#fff] - The focus text color of a raised button.

/// @prop {Map} fab-background [igx-color: ('primary', 500)] - The background color of a floating action button.
/// @prop {Color} fab-text-color [#fff] - The text color of a floating action button.
/// @prop {Map} fab-hover-background [igx-color: ('primary', 600)] - The hover background color of a floating action button.
/// @prop {Color} fab-hover-text-color [#fff] - The hover text color of a floating action button.
/// @prop {Map} fab-focus-background [igx-color: ('primary', 600))] - The focus background color of floating action button.
/// @prop {Color} fab-focus-text-color [#fff] - The focus text color of a floating action button.
///
/// @prop {Map} icon-hover-background [igx-color: ('grays', 50)] - The hover background color of an icon button.
/// @prop {Map} icon-focus-background [igx-color: ('grays', 100)] - The focus icon color of an icon button.
///
/// @prop {Number} raised-resting-elevation [0] - The elevation level, between 0-24, to be used for the resting state.
/// @prop {Number} raised-hover-elevation [0] - The elevation level, between 0-24, to be used for the hover state.
/// @prop {Number} raised-focus-elevation [0] - The elevation level, between 0-24, to be used for the focus state.
/// @prop {Number} fab-resting-elevation [0] - The elevation level, between 0-24, to be used for the resting state.
/// @prop {Number} fab-hover-elevation [0] - The elevation level, between 0-24, to be used for the hover state.
/// @prop {Number} fab-focus-elevation [0] - The elevation level, between 0-24, to be used for the focus state.
///
/// @prop {Number} flat-border-radius [0] - The border radius fraction used for flat button.
/// @prop {Number} raised-border-radius [2px] - The border radius fraction used for raised button.
/// @prop {Number} outlined-border-radius [2px] - The border radius fraction used for outlined button.
/// @prop {Number} icon-border-radius [2px] - The border radius fraction used for icon button.
///
/// @requires {function} extend
/// @requires {map} $_light-button
/// @requires {map} $_fluent-shape-button
/// @requires {map} $_fluent-elevation-button
$_fluent-button: extend(
    $_light-button,
    $_fluent-shape-button,
    $_fluent-elevation-button,
    (
        variant: 'fluent',

        flat-text-color: (
            igx-color: ('grays', 900)
        ),

        flat-icon-color:  (
            igx-color: ('primary', 500)
        ),

        flat-hover-icon-color:  (
            igx-color: ('primary', 500)
        ),

        flat-focus-icon-color:  (
            igx-color: ('primary', 500)
        ),

        flat-hover-background: transparent,

        flat-hover-text-color: (
            igx-color: ('primary', 500)
        ),

        flat-focus-background:(
            igx-color:('grays', 100)
        ),

        flat-focus-text-color: (
            igx-color: ('primary', 500)
        ),

        outlined-outline-color: (
            igx-color: ('grays', 800)
        ),

        outlined-text-color: (
            igx-color: ('grays', 900)
        ),

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

        outlined-hover-text-color: (
            igx-color: ('grays', 900)
        ),

        outlined-focus-background: (
            igx-color: ('grays', 100)
        ),

        outlined-focus-text-color: (
            igx-color: ('grays', 900)
        ),

        raised-background: (
            igx-color: ('primary', 500)
        ),

        raised-text-color: #fff,

        raised-hover-background: (
            igx-color: ('primary', 600)
        ),

        raised-hover-text-color: #fff,

        raised-focus-background: (
            igx-color: ('primary', 600)
        ),

        raised-focus-text-color: #fff,

        fab-background: (
            igx-color: ('primary', 500)
        ),

        fab-text-color: #fff,

        fab-hover-background: (
            igx-color: ('primary', 600)
        ),

        fab-hover-text-color: #fff,

        fab-focus-background: (
            igx-color: ('primary', 600)
        ),

        fab-focus-text-color: #fff,

        icon-hover-background: (
            igx-color: ('grays', 50)
        ),

        icon-focus-background: (
            igx-color: ('grays', 100)
        ),
    )
);