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

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

/// Generates a light card schema.
/// @type {Map}
/// @prop {Map} background [igx-color: 'surface']- The card background color.
/// @prop {Map} header-text-color [igx-color: 'surface', text-contrast: (), rgba: .87] - The text color of the card title.
/// @prop {Map} subtitle-text-color [igx-color: 'surface', text-contrast: (), rgba: .6] - The text color of the card subtitle.
/// @prop {Map} content-text-color [igx-color: 'surface', text-contrast: (), rgba: .6] - The text color of the card content.
/// @prop {Map} actions-text-color [igx-color: 'surface', text-contrast: (), rgba: .6] - The text color of the card buttons.
/// @prop {Number} resting-elevation [2] - The elevation level, between 0-24, to be used for the resting state.
/// @prop {Number} hover-elevation [8] - The elevation level, between 0-24, to be used for the hover state.
/// @prop {Number} border-radius [.17] - The border radius fraction, between 0-1 to be used for card date.
/// @prop {Map} outline-color [igx-color: ('grays', 400)] - The outline color of an outlined type card.
/// @prop {color} card-border-color [transparent] - The border color of an card.
///
/// @requires {function} extend
/// @requires {map} $_default-shape-card
/// @requires {map} $_default-elevation-card
/// @see $default-palette
$_light-card: extend(
    $_default-shape-card,
    $_default-elevation-card,
    (
        background: (
            igx-color: 'surface'
        ),

        header-text-color: (
            igx-color: 'surface',
            text-contrast: (),
            rgba: .87
        ),

        subtitle-text-color: (
            igx-color: 'surface',
            text-contrast: (),
            rgba: .6
        ),

        content-text-color: (
            igx-color: 'surface',
            text-contrast: (),
            rgba: .6
        ),

        actions-text-color: (
            igx-color: 'surface',
            text-contrast: (),
            rgba: .6
        ),

        card-border-color: transparent,

        outline-color: (
            igx-color: ('grays', 400)
        )
    )
);

/// Generates a fluent card schema.
/// @type {Map}
/// @prop {Map} outline-color [igx-color: ('grays', 200)] - The outline color of an outlined type card.
/// @prop {map} card-border-color [ igx-color: ('grays', 200)] - The border color of an card.
///
/// @prop {Number} resting-elevation [0] - The elevation level, between 0-24, to be used for the resting state.
/// @prop {Number} hover-elevation [0] - The elevation level, between 0-24, to be used for the hover state.
/// @prop {Number} border-radius [2px] - The border radius fraction, between 0-1 to be used for card date.
///
/// @requires {function} extend
/// @requires {map} $_fluent-shape-card
/// @requires {map} $_fluent-elevation-card
$_fluent-card: extend(
    $_light-card,
    $_fluent-shape-card,
    $_fluent-elevation-card,
    (
        outline-color: (
            igx-color: ('grays', 200)
        ),

        card-border-color: (
            igx-color: ('grays', 200)
        ),
    )
);