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

////
/// @group schemas
/// @access private
/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
////

/// Generates a light input-group schema.
/// @type {Map}
///
/// @prop {map} idle-text-color [igx-color: ('grays', 600)] - The input text color in the idle state.
/// @prop {map} filled-text-color [igx-color: ('grays', 900)] - The input text color in the filled state.
/// @prop {map} focused-text-color [igx-color: ('grays', 900)] - The input text color in the focused state.
/// @prop {map} disabled-text-color [igx-color: ('grays', 500)] - The input text color in the disabled state.
///
/// @prop {map} idle-secondary-color [igx-color: ('grays', 600)] - The label color in the idle state.
/// @prop {map} filled-secondary-color [igx-color: ('grays', 600)] - The label color in the filled state.
/// @prop {map} focused-secondary-color [ igx-color: ('primary', 500)] - The label color in the focused state.
///
/// @prop {map} border-color [igx-color: ('grays', 600)] - The border color for inputs with border.

/// @prop {map} idle-bottom-line-color [igx-color: ('grays', 600)] - The bottom line and border colors in the idle state.
/// @prop {map} hover-bottom-line-color [igx-color: ('grays', 900)] - The bottom line and border colors in the hover state.
/// @prop {map} focused-bottom-line-color [igx-color: ('primary', 500)] - The bottom line and border colors in the focused state.
/// @prop {map} interim-bottom-line-color [igx-color: ('primary', 500), rgba: .12] - The bottom line and border colors during the to-focused transition.
/// @prop {map} disabled-bottom-line-color [igx-color: ('grays', 500)] - The bottom line and border colors in the disabled state.
///
/// @prop {map} border-color [igx-color: ('grays', 600)] - The border color for input groups of type border and fluent.
/// @prop {map} hover-border-color [igx-color: ('grays', 600)] - The hover input border for input groups of type border and fluent.
/// @prop {map} focused-border-color [igx-color: ('primary', 500)] - The focused input border color for input groups of type border and fluent.
/// @prop {map} disabled-border-color [igx-color: ('grays', 500), rgba: .06] - The disabled border color for input groups of type border and fluent.
///
/// @prop {map} box-background [igx-color: ('grays', 200)] - The background color of an input group of type box.
/// @prop {map} box-disabled-background [igx-color: ('grays', 100)] - The background color of an input group of type box in the disabled state.
///
/// @prop {Color} border-background [transparent] - The background color of an input group of type border.
/// @prop {map} border-disabled-background [igx-color: ('grays', 100)] - The background color of an input group of type border in the disabled state.
///
/// @prop {Color} search-background [#fff] - The background color of an input group of type search.
/// @prop {Color} search-disabled-background [igx-color: ('grays', 100)] - The background color of an input group of type search in the disabled state.
///
/// @prop {Number} search-resting-elevation [1] - The elevation level, between 0-24, to be used for the resting state of the search input.
/// @prop {Number} search-hover-elevation [2] - The elevation level, between 0-24, to be used for the hover state of the search input.
/// @prop {Number} search-disabled-elevation [0] - The elevation level, between 0-24, to be used for the disabled state of the search input.
///
/// @prop {map} success-secondary-color [igx-color: ('success')] - The success color used in the valid state.
/// @prop {map} warning-secondary-color [igx-color: ('warn')] - The warning color used in the warning state.
/// @prop {map} error-secondary-color [igx-color: ('error')] - The error color used in the error state.
///
/// @prop {Number} box-border-radius [.2 .2 0 0] - The border radius fraction, between 0-1 to be used for box input .
/// @prop {Number} border-border-radius [.2] - The border radius fraction, between 0-1 to be used for border input .
/// @prop {Number} search-border-radius [.2] - The border radius fraction, between 0-1 to be used for search input .
///
/// @requires {function} extend
/// @requires {map} $_default-shape-input-group
/// @requires {map} $_default-elevation-input-group
/// @see $default-palette
$_light-input-group: extend(
    $_default-shape-input-group,
    $_default-elevation-input-group,
    (
        variant: 'material',

        input-prefix-color: (
            igx-color: ('grays', 600)
        ),

        input-prefix-background: transparent,

        input-suffix-color: (
            igx-color: ('grays', 600)
        ),

        input-suffix-background: transparent,

        idle-text-color: (
            igx-color: ('grays', 600)
        ),

        border-color: (
            igx-color: ('grays', 600)
        ),

        hover-border-color: (
            igx-color: ('grays', 900)
        ),

        focused-border-color: (
            igx-color: ('primary', 500)
        ),

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

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

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

        idle-secondary-color: (
            igx-color: ('grays', 600)
        ),

        filled-secondary-color: (
            igx-color: ('grays', 600)
        ),

        focused-secondary-color: (
            igx-color: ('primary', 500)
        ),

        idle-bottom-line-color: (
            igx-color: ('grays', 600)
        ),

        hover-bottom-line-color: (
            igx-color: ('grays', 900)
        ),

        focused-bottom-line-color: (
            igx-color: ('primary', 500)
        ),

        interim-bottom-line-color: (
            igx-color: ('primary', 500),
            rgba: .12
        ),

        disabled-bottom-line-color: (
            igx-color: ('grays', 500)
        ),

        disabled-border-color: (
            igx-color: ('grays', 500),
            rgba: .06
        ),

        box-background: (
            igx-color: ('grays', 200)
        ),

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

        border-background: transparent,

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

        search-background: #fff,

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

        success-secondary-color: (
            igx-color: ('success')
        ),

        warning-secondary-color: (
            igx-color: ('warn')
        ),

        error-secondary-color: (
            igx-color: ('error')
        ),

        placeholder-color: (
            igx-color: ('grays', 500)
        ),

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

/// Generates a fluent input-group schema.
/// @type {Map}
///
/// @prop {map} border-color [igx-color: ('grays', 500)] - The border color for input groups of type border and fluent.
/// @prop {map} hover-border-color [igx-color: ('grays', 800)] - The hover input border for input groups of type border and fluent.
/// @prop {map} focused-border-color [igx-color: ('grays', 500)] - The focused input border color for input groups of type border and fluent.
/// @prop {map} disabled-border-color [igx-color: ('grays', 500)] - The disabled border color for input groups of type border and fluent.
///
/// @prop {map} border-disabled-background [igx-color: ('grays', 100)] - The background color of an input group of type border in the disabled state.
///
/// @prop {Color} search-disabled-background [igx-color: ('grays', 100)] - The background color of an input group of type search in the disabled state.
///
/// @prop {Color} input-prefix-background [igx-color: ('grays', 100), hexrgba: #fff] - The background color of an input prefix of type line, box, border and fluent.
/// @prop {Color} input-suffix-background [ igx-color: ('grays', 100), hexrgba: #fff] - The background color of an input suffix of type line, box, border and fluent.
///
/// @prop {Number} search-resting-elevation [0] - The elevation level, between 0-24, to be used for the resting state of the search input.
/// @prop {Number} search-hover-elevation [0] - The elevation level, between 0-24, to be used for the hover state of the search input.
/// @prop {Number} search-disabled-elevation [0] - The elevation level, between 0-24, to be used for the disabled state of the search input.
///
/// @prop {Number} box-border-radius [2px] - The border radius fraction, between 0-1 to be used for box input .
/// @prop {Number} border-border-radius [2px] - The border radius fraction, between 0-1 to be used for border input .
/// @prop {Number} search-border-radius [2px] - The border radius fraction, between 0-1 to be used for search input .
///
/// @requires {function} extend
/// @requires {map} $_light-input-group
/// @requires {map} $_fluent-shape-input-group
/// @requires {map} $_fluent-elevation-input-group
$_fluent-input-group: extend(
    $_light-input-group,
    $_fluent-shape-input-group,
    $_fluent-elevation-input-group,
    (
        variant: 'fluent',

        border-color: (
            igx-color: ('grays', 500)
        ),

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

        focused-border-color: (
            igx-color: ('grays', 500)
        ),

        disabled-border-color: (
            igx-color: ('grays', 500)
        ),

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

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

        input-prefix-background: (
            igx-color: ('grays', 100),
            hexrgba: #fff
        ),

        input-suffix-background: (
            igx-color: ('grays', 100),
            hexrgba: #fff
        ),
    )
);