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

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

/// Generates a light carousel schema.
/// @type {Map}
/// @prop {Color} slide-background [#fff] - The slide background color.
/// @prop {Color} button-background [#fff] - The previous/next buttons idle background color.
/// @prop {Color} button-hover-background [#fff] - The previous/next buttons hover background color.
/// @prop {Map} button-disabled-background [igx-color: ('grays', 100), hexrgba: ()] - The previous/next buttons disabled background color.
/// @prop {Map} button-arrow-color [igx-color: ('grays', 700)] - The previous/next buttons idle arrow color.
/// @prop {Map} button-hover-arrow-color [igx-color: ('grays', 900)] - The previous/next buttons hover arrow color.
/// @prop {Map} button-disabled-arrow-color [igx-color: ('grays' 400)] - The previous/next buttons disabled color.
/// @prop {Color} indicator-dot-color [#fff] - The active indicator dot color.
/// @prop {Color} indicator-border-color [#fff] - The idle indicator border color.
/// @prop {Color} indicator-active-border-color [#fff] - The active indicator border color.
/// @prop {Number} border-radius [0] - The border radius fraction, between 0-1 to be used for carousel.
///
/// @requires {function} extend
/// @requires {map} $_default-shape-carousel
/// @requires {map} $_default-elevation-carousel
$_light-carousel: extend(
    $_default-shape-carousel,
    $_default-elevation-carousel,
    (
        slide-background: #fff,

        button-background: #fff,
        button-hover-background: #fff,

        button-arrow-color: (
            igx-color: ('grays', 700)
        ),

        button-hover-arrow-color: (
            igx-color: ('grays', 900)
        ),

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

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

        indicator-dot-color: #fff,
        indicator-border-color: #fff,
        indicator-active-border-color: #fff,
    )
);

/// Generates a fluent carousel schema.
/// @type {Map}
/// @requires {function} extend
/// @requires {map} $_light-carousel
/// @requires {map} $_fluent-shape-carousel
/// @requires {map} $_fluent-elevation-carousel
/// @see $default-palette
$_fluent-carousel: extend($_light-carousel, $_fluent-shape-carousel, $_fluent-elevation-carousel);