@import '../shape/calendar';

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

/// Generates a light calendar schema.
/// @type {Map}
/// @prop {Map} content-background [igx-color: 'surface'] - The main content background color.
/// @prop {Map} content-text-color [igx-color: 'surface', text-contrast: (), rgba: .87] - The main content text color.
/// @prop {Map} header-background [igx-color: ('secondary', 500)] - The header background color.
/// @prop {Map} header-text-color [igx-contrast-color: ('secondary', 500)] - The header text color.
/// @prop {Map} picker-arrow-color [igx-color: 'surface', text-contrast: (), rgba: .74] - The idle picker arrow color.
/// @prop {Map} picker-arrow-hover-color [igx-color: ('secondary', 500)] - The picker hover arrow color.
/// @prop {Map} picker-text-color [igx-color: 'surface', text-contrast: (), rgba: .74]- The idle picker month/year color.
/// @prop {Map} picker-text-hover-color [igx-color: ('secondary', 500)]-  The hover picker month/year color.
/// @prop {Map} inactive-text-color [igx-color: 'surface', text-contrast: (), rgba: .26] - The text color for weekday labels and other month dates.
/// @prop {Map} weekend-text-color [igx-color: 'surface', text-contrast: (), rgba: .38] - The text color for weekend days.
/// @prop {Map} year-current-text-color [igx-color: ('secondary', 500)] - The text color for the current/selected year.
/// @prop {Map} month-current-text-color [igx-color: ('secondary', 500)]- The text color for the current/selected month.
/// @prop {Map} year-hover-text-color [igx-color: ('secondary', 500)] - The year hover text color.
/// @prop {Map} month-hover-text-color [igx-color: 'surface', text-contrast: ()] - The month hover text color.
/// @prop {Map} month-hover-background [igx-color: ('grays', 200)] - The month hover text color.
/// @prop {Map} date-selected-background [igx-color: ('secondary', 500)] - The background color for the selected date.
/// @prop {Map} date-selected-text-color [igx-contrast-color: ('secondary', 500)] - The text color for the selected date.
/// @prop {Map} date-current-text-color [igx-color: ('secondary', 500)] - The text color for the current date.
/// @prop {Map} date-current-bg-color [igx-color: (transparent] - The background color for the current date.
/// @prop {Map} date-hover-background [igx-color: ('grays', 200)] - The hover date background color.
/// @prop {Map} date-special-background [igx-color: ('grays', 100)] - The background color used for special dates.
/// @prop {Map} date-special-text-color [igx-color: ('grays', 900)] - The text color used for special dates.
/// @prop {Map} date-disabled-text-color [igx-color: ('grays', 500), hexrgba: (), rgba: .6] - The text color for disabled dates.
/// @prop {Map} date-disabled-background [igx-color: ('grays', 100), hexrgba: ()] - The background color for disabled dates.
/// @prop {Number} border-radius [.2] - The border radius fraction, between 0-1 to be used for calendar.
/// @prop {Number} date-border-radius [1] - The border radius fraction, between 0-1 to be used for calendar.
/// @prop {Number} month-border-radius [1] - The border radius fraction, between 0-1 to be used for calendar.
/// @requires {function} extend
/// @requires {map} $_default-shape-calendar
/// @see $default-palette
$_light-calendar: extend(
    $_default-shape-calendar,
    (
        variant: 'material',
        content-background: (
            igx-color: 'surface'
        ),

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

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

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

        picker-arrow-color: (
            igx-color: 'surface',
            text-contrast: (),
            rgba: .74
        ),

        picker-arrow-hover-color: (
            igx-color: ('secondary', 500)
        ),

        picker-text-color: (
            igx-color: 'surface',
            text-contrast: (),
            rgba: .74
        ),

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

        inactive-text-color: (
            igx-color: 'surface',
            text-contrast: (),
            rgba: .26
        ),

        weekend-text-color: (
            igx-color: 'surface',
            text-contrast: (),
            rgba: .38
        ),

        year-current-text-color: (
            igx-color: ('secondary', 500)
        ),

        month-current-text-color: (
            igx-color: ('secondary', 500)
        ),

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

        month-hover-background: (
            igx-color: ('grays', 200)
        ),

        month-hover-text-color: (
            igx-color: 'surface',
            text-contrast: ()
        ),

        date-selected-background: (
            igx-color: ('secondary', 500)
        ),

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

        date-current-text-color: (
            igx-color: ('secondary', 500)
        ),

        date-current-bg-color: transparent,

        date-current-bg-hover-color: (
            igx-contrast-color: ('secondary', 500)
        ),
        date-current-bg-focus-color: (
            igx-contrast-color: ('secondary', 500)
        ),

        date-hover-background: (
            igx-color: ('grays', 200)
        ),

        date-special-background: (
            igx-color: ('grays', 100)
        ),

        date-special-text-color: (
            igx-color: ('grays', 900)
        ),

        date-disabled-text-color: (
            igx-color: ('grays', 500),
            hexrgba: (),
            rgba: .6
        ),

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

/// Generates a fluent calendar schema.
/// @type {Map}
/// @prop {Color} date-current-text-color [#fff] - The text color for the current date.
/// @prop {Map} date-current-bg-color [igx-color: ('primary', 500)] - The background color for the current date.
/// @prop {map} date-selected-background [igx-color: ('primary', 100), rgba: .5, hexrgba: #fff] - The background color for the selected date.
/// @prop {Map} date-selected-text-color [igx-color: ('primary', 100)] - The text color for the selected date.
///
/// @prop {Number} border-radius [0%] - The border radius fraction, between 0-1 to be used for calendar.
/// @prop {Number} date-border-radius [0%] - The border radius fraction, between 0-1 to be used for calendar.
/// @prop {Number} month-border-radius [0%] - The border radius fraction, between 0-1 to be used for calendar.
///
/// @requires {function} extend
/// @requires {map} $_light-calendar
/// @requires {map} $_fluent-shape-calendar
$_fluent-calendar: extend(
    $_light-calendar,
    $_fluent-shape-calendar,
    (
        variant: 'fluent',
        date-current-text-color: #fff,

        date-current-bg-color: (
            igx-color: ('primary', 500)
        ),

        date-selected-background: (
            igx-color: ('primary', 100),
            rgba: .5,
            hexrgba: #fff
        ),

        date-selected-text-color: (
            igx-contrast-color: ('primary', 100)
        ),
    )
);