@use '../../../../utils/map' as *;
@use '../../../../typography/functions' as *;

////
/// @package theming
/// @group schemas
/// @access public
////

/// Material Schemas

/// Generates a base material icon button schema.
/// @type {Map}
/// @prop {Color} shadow-color [transparent] - The shadow color of the material icon button.
/// @prop {Color} background [transparent] - The background color of the material icon button.
/// @prop {Map} foreground [color: ('gray', 900)] - The idle text color of the material icon button.
/// @prop {Map} hover-background [color: ('gray', 500, .08)] - The hover background color of the material icon button.
/// @prop {Map} hover-foreground [color: ('gray', 900)] - The hover text color of the material icon button.
/// @prop {Map} focus-background [color: ('gray', 500, .16)] - The focus background color of the material icon button.
/// @prop {Map} focus-foreground [color: ('gray', 900)] - The focus text color of the material icon button.
/// @prop {Map} focus-hover-background [color: ('gray', 500, .24)] - The background color on focus hovered state of the icon button.
/// @prop {Map} focus-hover-foreground [color: ('gray', 900)] - The foreground color on focus hovered state of the icon button.
/// @prop {Map} active-background [color: ('gray', 500, .32)] - The active background color of the material icon button.
/// @prop {Map} active-foreground [color: ('gray', 900)] - The active text color of the material icon button.
/// @prop {Color} border-color [transparent] - The border color of the material icon button.
/// @prop {Color} focus-border-color [transparent] - The focus border color of the material icon button.
/// @prop {Color} disabled-background [transparent] - The disabled background color of the material icon button.
/// @prop {Map} disabled-foreground [color: ('gray', 500)] - The disabled foreground color of the material icon button.
/// @prop {Color} disabled-border-color [transparent] - The disabled border color of the material icon button.
/// @prop {List} border-radius [(rem(20px), rem(0), rem(20px))] - The border radius used for the material icon button.
/// @prop {List} size [(rem(24px), rem(30px), rem(36px))] - The size used for the material icon button.
/// @prop {Number} default-size [3] - The default size used for the icon button.
/// @prop {Map} typography [text: (value: 'button')] - The typography styles used for the component.
$material-base-icon-button: (
    shadow-color: transparent,
    background: transparent,
    foreground: (
        color: (
            'gray',
            900,
        ),
    ),
    hover-background: (
        color: (
            'gray',
            500,
            0.08,
        ),
    ),
    hover-foreground: (
        color: (
            'gray',
            900,
        ),
    ),
    focus-background: (
        color: (
            'gray',
            500,
            0.16,
        ),
    ),
    focus-foreground: (
        color: (
            'gray',
            900,
        ),
    ),
    focus-hover-background: (
        color: (
            'gray',
            500,
            0.24,
        ),
    ),
    focus-hover-foreground: (
        color: (
            'gray',
            900,
        ),
    ),
    active-background: (
        color: (
            'gray',
            500,
            0.32,
        ),
    ),
    active-foreground: (
        color: (
            'gray',
            900,
        ),
    ),
    border-color: transparent,
    focus-border-color: transparent,
    disabled-background: transparent,
    disabled-foreground: (
        color: (
            'gray',
            500,
        ),
    ),
    disabled-border-color: transparent,
    border-radius: (
        border-radius: (
            rem(20px),
            rem(0),
            rem(20px),
        ),
    ),
    size: (
        sizable: (
            rem(24px),
            rem(30px),
            rem(36px),
        ),
    ),
    default-size: 3,
    typography: (
        text: (
            value: 'button',
        ),
    ),
);

/// Generates a material flat icon button schema.
/// @type {Map}
/// @requires {Map} $material-base-icon-button
$material-flat-icon-button: extend(
    $material-base-icon-button,
    (
        selector: '[igxIconButton="flat"], .igx-icon-button--flat',
        _meta: (
            theme: 'material',
            variant: 'light',
            type: 'flat',
        ),
    )
);

/// Generates a material contained icon button schema.
/// @type {Map}
/// @prop {Map} background [color: ('gray', 900, .08)] - The background color of the material contained icon button.
/// @prop {Map} hover-background [color: ('gray', 900, .12)] - The hover background color of the material contained icon button.
/// @prop {Map} focus-background [color: ('gray', 900, .16)] - The focus background color of the material contained icon button.
/// @prop {Map} focus-hover-background [color: ('gray', 900, .20)] - The background color on focus hovered state of the material contained icon button.
/// @prop {Map} active-background [color: ('gray', 900, .24)] - The active background color of the material contained icon button.
/// @prop {Map} disabled-background [color: ('gray', 900, .04)] - The disabled background color of the material contained icon button.
/// @requires {Map} $material-base-icon-button
$material-contained-icon-button: extend(
    $material-base-icon-button,
    (
        selector: '[igxIconButton="contained"], .igx-icon-button--contained',
        background: (
            color: (
                'gray',
                900,
                0.08,
            ),
        ),
        hover-background: (
            color: (
                'gray',
                900,
                0.12,
            ),
        ),
        focus-background: (
            color: (
                'gray',
                900,
                0.16,
            ),
        ),
        focus-hover-background: (
            color: (
                'gray',
                900,
                0.2,
            ),
        ),
        active-background: (
            color: (
                'gray',
                900,
                0.24,
            ),
        ),
        disabled-background: (
            color: (
                'gray',
                900,
                0.04,
            ),
        ),
        _meta: (
            theme: 'material',
            variant: 'light',
            type: 'contained',
        ),
    )
);

/// Generates a material outlined icon button schema.
/// @type {Map}
/// @prop {Map} border-color [color: ('gray', 300)] - The border color of the material outlined icon button.
/// @prop {Map} focus-border-color [color: ('gray', 300)] - The focus border color of the material outlined icon button.
/// @prop {Map} disabled-border-color [color: ('gray', 300)] - The disabled border color of the material outlined icon button.
/// @requires {Map} $material-base-icon-button
$material-outlined-icon-button: extend(
    $material-base-icon-button,
    (
        selector: '[igxIconButton="outlined"], .igx-icon-button--outlined',
        border-color: (
            color: (
                'gray',
                300,
            ),
        ),
        focus-border-color: (
            color: (
                'gray',
                300,
            ),
        ),
        disabled-border-color: (
            color: (
                'gray',
                300,
            ),
        ),
        _meta: (
            theme: 'material',
            variant: 'light',
            type: 'outlined',
        ),
    )
);

/// Generates a light material icon button schema.
/// @type {Map}
/// @requires {Map} $material-flat-icon-button
/// @requires {Map} $material-contained-icon-button
/// @requires {Map} $material-outlined-icon-button
$material-icon-button: (
    flat: $material-flat-icon-button,
    contained: $material-contained-icon-button,
    outlined: $material-outlined-icon-button,
);

/// Fluent Schemas

/// Generates a fluent base icon button schema.
/// @type {Map}
/// @prop {Color} shadow-color [transparent] - The shadow color of the fluent icon button.
/// @prop {Color} background [transparent] - The background color of the fluent icon button.
/// @prop {Map} foreground [color: ('primary', 500)] - The idle text color of the fluent icon button.
/// @prop {Map} hover-background [color: ('gray', 200)] - The hover background color of the fluent icon button.
/// @prop {Map} hover-foreground [color: ('primary', 600)] - The hover text color of the fluent icon button.
/// @prop {Color} focus-background [transparent] - The focus background color of the fluent icon button.
/// @prop {Map} focus-foreground [color: ('primary', 500)] - The focus text color of the fluent icon button.
/// @prop {Map} focus-hover-background [color: ('gray', 200)] - The background color on focus hovered state of the icon button.
/// @prop {Map} focus-hover-foreground [color: ('primary', 600)] - The foreground color on focus hovered state of the icon button.
/// @prop {Map} active-background [color: ('gray', 300)] - The active background color of the fluent icon button.
/// @prop {Map} active-foreground [color: ('primary', 800)] - The active text color of the fluent icon button.
/// @prop {Color} border-color [transparent] - The border color of the fluent icon button.
/// @prop {Map} focus-border-color [color: ('gray', 700)] - The focus border color of the fluent icon button.
/// @prop {Map} disabled-background [color: ('gray', 100)] - The disabled background color of the fluent icon button.
/// @prop {Map} disabled-foreground [color: ('gray', 500)] - The disabled foreground color of the fluent icon button.
/// @prop {Color} disabled-border-color [transparent] - The disabled border color of the fluent icon button.
/// @prop {List} border-radius [(rem(2px), rem(0), rem(20px))] - The border radius used for the fluent flat icon button.
/// @prop {List} size [(rem(24px), rem(32px), rem(38px))] - The size used for the fluent icon button.
/// @prop {Number} default-size [2] - The default size used for the icon button.
$fluent-base-icon-button: (
    shadow-color: transparent,
    background: transparent,
    foreground: (
        color: (
            'primary',
            500,
        ),
    ),
    hover-background: (
        color: (
            'gray',
            200,
        ),
    ),
    hover-foreground: (
        color: (
            'primary',
            600,
        ),
    ),
    focus-background: transparent,
    focus-foreground: (
        color: (
            'primary',
            500,
        ),
    ),
    focus-hover-background: (
        color: (
            'gray',
            200,
        ),
    ),
    focus-hover-foreground: (
        color: (
            'primary',
            600,
        ),
    ),
    active-background: (
        color: (
            'gray',
            300,
        ),
    ),
    active-foreground: (
        color: (
            'primary',
            800,
        ),
    ),
    border-color: transparent,
    focus-border-color: (
        color: (
            'gray',
            700,
        ),
    ),
    disabled-background: (
        color: (
            'gray',
            100,
        ),
    ),
    disabled-foreground: (
        color: (
            'gray',
            500,
        ),
    ),
    disabled-border-color: transparent,
    border-radius: (
        border-radius: (
            rem(2px),
            rem(0),
            rem(20px),
        ),
    ),
    size: (
        sizable: (
            rem(24px),
            rem(32px),
            rem(38px),
        ),
    ),
    default-size: 2,
);

/// Generates a fluent flat icon button schema.
/// @type {Map}
/// @requires {Map} $fluent-base-icon-button
$fluent-flat-icon-button: extend(
    $fluent-base-icon-button,
    (
        selector: '[igxIconButton="flat"], .igx-icon-button--flat',
        _meta: (
            theme: 'fluent',
            variant: 'light',
            type: 'flat',
        ),
    )
);

/// Generates a fluent contained icon button schema.
/// @type {Map}
/// @prop {Map} background [color: ('primary', 500)] - The background color of the fluent contained icon button.
/// @prop {Map} foreground [contrast-color: ('primary', 600)] - The idle text color of the fluent contained icon button.
/// @prop {Map} hover-background [color: ('primary', 600)] - The hover background color of the fluent contained icon button.
/// @prop {Map} hover-foreground [contrast-color: ('primary', 600)] - The hover text color of the fluent contained icon button.
/// @prop {Map} focus-background [color: ('primary', 500)] - The focus background color of the fluent contained icon button.
/// @prop {Map} focus-foreground [contrast-color: ('primary', 600)] - The focus text color of the fluent contained icon button.
/// @prop {Map} focus-hover-background [color: ('primary', 600)] - The background color on focus hovered state of the icon button.
/// @prop {Map} focus-hover-foreground [contrast-color: ('primary', 600)] - The foreground color on focus hovered state of the icon button.
/// @prop {Map} active-background [color: ('primary', 800)] - The active background color of the fluent contained icon button.
/// @prop {Map} active-foreground [contrast-color: ('primary', 800)] - The active text color of the fluent contained icon button.
/// @prop {Map} focus-border-color [contrast-color: ('primary', 600)] - The focus border color of the fluent contained icon button.
/// @requires {Map} $fluent-base-icon-button
$fluent-contained-icon-button: extend(
    $fluent-base-icon-button,
    (
        selector: '[igxIconButton="contained"], .igx-icon-button--contained',
        background: (
            color: (
                'primary',
                500,
            ),
        ),
        foreground: (
            contrast-color: (
                'primary',
                600,
            ),
        ),
        hover-background: (
            color: (
                'primary',
                600,
            ),
        ),
        hover-foreground: (
            contrast-color: (
                'primary',
                600,
            ),
        ),
        focus-background: (
            color: (
                'primary',
                500,
            ),
        ),
        focus-foreground: (
            contrast-color: (
                'primary',
                600,
            ),
        ),
        focus-hover-background: (
            color: (
                'primary',
                600,
            ),
        ),
        focus-hover-foreground: (
            contrast-color: (
                'primary',
                600,
            ),
        ),
        active-background: (
            color: (
                'primary',
                800,
            ),
        ),
        active-foreground: (
            contrast-color: (
                'primary',
                800,
            ),
        ),
        focus-border-color: (
            contrast-color: (
                'primary',
                600,
            ),
        ),
        _meta: (
            theme: 'fluent',
            variant: 'light',
            type: 'contained',
        ),
    )
);

/// Generates a fluent outlined icon button schema.
/// @type {Map}
/// @prop {Map} foreground [color: ('gray', 900)] - The idle text color of the fluent outlined icon button.
/// @prop {Map} border-color [color: ('gray', 700)] - The border color of the fluent outlined icon button.
/// @prop {Map} hover-foreground [color: ('gray', 900)] - The hover text color of the fluent outlined icon button.
/// @prop {Color} focus-background [transparent] - The focus background color of the fluent outlined icon button.
/// @prop {Map} focus-foreground [color: ('gray', 900)] - The focus text color of the fluent outlined icon button.
/// @prop {Map} focus-hover-foreground [color: ('gray', 900)] - The foreground color on focus hovered state of the icon button.
/// @prop {Map} active-foreground [color: ('gray', 900)] - The active text color of the fluent outlined icon button.
/// @prop {Map} focus-border-color [color: ('gray', 700)] - The focus border color of the fluent outlined icon button.
/// @prop {Map} disabled-border-color [color: ('gray', 300)] - The disabled border color of the fluent outlined icon button.
/// @requires {Map} $fluent-base-icon-button
$fluent-outlined-icon-button: extend(
    $fluent-base-icon-button,
    (
        selector: '[igxIconButton="outlined"], .igx-icon-button--outlined',
        foreground: (
            color: (
                'gray',
                900,
            ),
        ),
        border-color: (
            color: (
                'gray',
                600,
            ),
        ),
        hover-foreground: (
            color: (
                'gray',
                900,
            ),
        ),
        focus-background: transparent,
        focus-foreground: (
            color: (
                'gray',
                900,
            ),
        ),
        focus-hover-foreground: (
            color: (
                'gray',
                900,
            ),
        ),
        active-foreground: (
            color: (
                'gray',
                900,
            ),
        ),
        focus-border-color: (
            color: (
                'gray',
                700,
            ),
        ),
        disabled-border-color: (
            color: (
                'gray',
                300,
            ),
        ),
        _meta: (
            theme: 'fluent',
            variant: 'light',
            type: 'outlined',
        ),
    )
);

/// Generates a light fluent icon button schema.
/// @type {Map}
/// @requires {Map} $fluent-flat-icon-button
/// @requires {Map} $fluent-contained-icon-button
/// @requires {Map} $fluent-outlined-icon-button
$fluent-icon-button: (
    flat: $fluent-flat-icon-button,
    contained: $fluent-contained-icon-button,
    outlined: $fluent-outlined-icon-button,
);

/// Bootstrap Schemas

/// Generates a base bootstrap icon button schema.
/// @type {Map}
/// @prop {Map} shadow-color [color: ('primary', 600, .5)] - The shadow color of the bootstrap icon button.
/// @prop {Color} background [transparent] - The background color of the bootstrap icon button.
/// @prop {Map} foreground [color: ('primary', 500)] - The idle text color of the bootstrap icon button.
/// @prop {Map} hover-background [color: ('primary', 600)] - The hover background color of the bootstrap icon button.
/// @prop {Map} hover-foreground [contrast-color: ('primary', 600)] - The hover text color of the bootstrap icon button.
/// @prop {Map} focus-background [color: ('primary', 500)] - The focus background color of the bootstrap flat icon button.
/// @prop {Map} focus-foreground [contrast-color: ('primary', 600)] - The focus text color of the bootstrap icon button.
/// @prop {Map} focus-hover-background [color: ('primary', 600)] - The background color on focus hovered state of the icon button.
/// @prop {Map} focus-hover-foreground [contrast-color: ('primary', 600)] - The foreground color on focus hovered state of the icon button.
/// @prop {Map} active-background [color: ('primary', 800)] - The active background color of the bootstrap icon button.
/// @prop {Map} active-foreground [contrast-color: ('primary', 800)] - The active text color of the bootstrap icon button.
/// @prop {Color} border-color [transparent] - The border color of the bootstrap icon button.
/// @prop {Map} focus-border-color [transparent] - The focus border color of the bootstrap icon button.
/// @prop {Color} disabled-background [transparent] - The disabled background color of the bootstrap icon button.
/// @prop {Map} disabled-foreground [color: ('primary', 200)] - The disabled foreground color of the bootstrap icon button.
/// @prop {Color} disabled-border-color [transparent] - The disabled border color of the bootstrap icon button.
/// @prop {List} border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for the bootstrap icon button.
/// @prop {List} size [(rem(31px), rem(38px), rem(48px))] - The size used for the bootstrap icon button.
/// @prop {Number} default-size [2] - The default size used for the icon button
$bootstrap-base-icon-button: (
    shadow-color: (
        color: (
            'primary',
            600,
            0.5,
        ),
    ),
    background: transparent,
    foreground: (
        color: (
            'primary',
            500,
        ),
    ),
    hover-background: (
        color: (
            'primary',
            600,
        ),
    ),
    hover-foreground: (
        contrast-color: (
            'primary',
            600,
        ),
    ),
    focus-background: (
        color: (
            'primary',
            500,
        ),
    ),
    focus-foreground: (
        contrast-color: (
            'primary',
            600,
        ),
    ),
    focus-hover-background: (
        color: (
            'primary',
            600,
        ),
    ),
    focus-hover-foreground: (
        contrast-color: (
            'primary',
            600,
        ),
    ),
    active-background: (
        color: (
            'primary',
            800,
        ),
    ),
    active-foreground: (
        contrast-color: (
            'primary',
            800,
        ),
    ),
    border-color: transparent,
    focus-border-color: transparent,
    disabled-background: transparent,
    disabled-foreground: (
        color: (
            'primary',
            200,
        ),
    ),
    disabled-border-color: transparent,
    border-radius: (
        border-radius: (
            rem(4px),
            rem(0),
            rem(20px),
        ),
    ),
    size: (
        sizable: (
            rem(32px),
            rem(38px),
            rem(48px),
        ),
    ),
    default-size: 2,
);

/// Generates a bootstrap flat icon button schema.
/// @type {Map}
/// @prop {Color} hover-background [transparent] - The hover background color of the bootstrap flat icon button.
/// @prop {Map} hover-foreground [color: ('primary', 600)] - The hover text color of the bootstrap flat icon button.
/// @prop {Color} focus-background [transparent] - The focus background color of the bootstrap flat icon button.
/// @prop {Map} focus-foreground [color: ('primary', 500)] - The focus text color of the bootstrap flat icon button.
/// @prop {Color} focus-hover-background [transparent] - The background color on focus hovered state of the icon button.
/// @prop {Map} focus-hover-foreground [color: ('primary', 600)] - The foreground color on focus hovered state of the icon button.
/// @prop {Color} active-background [transparent] - The active background color of the bootstrap flat icon button.
/// @prop {Map} active-foreground [color: ('primary', 800)] - The active text color of the bootstrap flat icon button.
/// @requires {Map} $bootstrap-base-icon-button
$bootstrap-flat-icon-button: extend(
    $bootstrap-base-icon-button,
    (
        selector: '[igxIconButton="flat"], .igx-icon-button--flat',
        hover-background: transparent,
        hover-foreground: (
            color: (
                'primary',
                600,
            ),
        ),
        focus-background: transparent,
        focus-foreground: (
            color: (
                'primary',
                500,
            ),
        ),
        focus-hover-background: transparent,
        focus-hover-foreground: (
            color: (
                'primary',
                600,
            ),
        ),
        active-background: transparent,
        active-foreground: (
            color: (
                'primary',
                800,
            ),
        ),
        _meta: (
            theme: 'bootstrap',
            variant: 'light',
            type: 'flat',
        ),
    )
);

/// Generates a bootstrap contained icon button schema.
/// @type {Map}
/// @prop {Map} background [color: ('primary', 500)] - The background color of the bootstrap contained icon button.
/// @prop {Map} foreground [contrast-color: ('primary', 600)] - The idle text color of the bootstrap contained icon button.
/// @prop {Map} disabled-background [color: ('primary', 50)] - The disabled background color of the bootstrap contained icon button.
/// @prop {Map} disabled-foreground [color: ('primary', 200)] - The disabled foreground color of the bootstrap contained icon button.
/// @requires {Map} $bootstrap-base-icon-button
$bootstrap-contained-icon-button: extend(
    $bootstrap-base-icon-button,
    (
        selector: '[igxIconButton="contained"], .igx-icon-button--contained',
        background: (
            color: (
                'primary',
                500,
            ),
        ),
        foreground: (
            contrast-color: (
                'primary',
                600,
            ),
        ),
        disabled-background: (
            color: (
                'primary',
                50,
            ),
        ),
        disabled-foreground: (
            color: (
                'primary',
                200,
            ),
        ),
        _meta: (
            theme: 'bootstrap',
            variant: 'light',
            type: 'contained',
        ),
    )
);

/// Generates a bootstrap outlined icon button schema.
/// @type {Map}
/// @prop {Map} border-color [color: ('primary', 500)] - The border color of the bootstrap outlined icon button.
/// @prop {Map} hover-foreground [contrast-color: ('primary', 600)] - The hover text color of the bootstrap outlined icon button.
/// @prop {Map} focus-border-color [color: ('primary', 800)] - The focus border color of the bootstrap outlined icon button.
/// @prop {Map} disabled-border-color [color: ('primary', 50)] - The disabled border color of the bootstrap outlined icon button.
/// @requires {Map} $bootstrap-base-icon-button
$bootstrap-outlined-icon-button: extend(
    $bootstrap-base-icon-button,
    (
        selector: '[igxIconButton="outlined"], .igx-icon-button--outlined',
        border-color: (
            color: (
                'primary',
                500,
            ),
        ),
        hover-foreground: (
            contrast-color: (
                'primary',
                600,
            ),
        ),
        focus-border-color: (
            color: (
                'primary',
                800,
            ),
        ),
        disabled-border-color: (
            color: (
                'primary',
                50,
            ),
        ),
        _meta: (
            theme: 'bootstrap',
            variant: 'light',
            type: 'outlined',
        ),
    )
);

/// Generates a light bootstrap icon button schema.
/// @type {Map}
/// @requires {Map} $bootstrap-flat-icon-button
/// @requires {Map} $bootstrap-contained-icon-button
/// @requires {Map} $bootstrap-outlined-icon-button
$bootstrap-icon-button: (
    flat: $bootstrap-flat-icon-button,
    contained: $bootstrap-contained-icon-button,
    outlined: $bootstrap-outlined-icon-button,
);

/// Indigo Schemas

/// Generates a base indigo icon button schema.
/// @type {Map}
/// @prop {Map} shadow-color [color: ('gray', 900, .15)] - The shadow color of the indigo icon button.
/// @prop {Color} background [transparent] - The background color of the indigo icon button.
/// @prop {Map} foreground [color: ('gray', 600)] - The idle text color of the indigo icon button.
/// @prop {Map} hover-background [color: ('gray', 900, 0.5)] - The hover background color of the indigo icon button.
/// @prop {Map} hover-foreground [color: ('gray', 700)] - The hover text color of the indigo icon button.
/// @prop {Color} focus-background [transparent] - The focus background color of the indigo icon button.
/// @prop {Map} focus-foreground [color: ('gray', 600)] - The focus text color of the indigo icon button.
/// @prop {Map} focus-hover-background [color: ('gray', 900, 0.5)] - The background color on focus hovered state of the icon button.
/// @prop {Map} focus-hover-foreground [color: ('gray', 700)] - The foreground color on focus hovered state of the icon button.
/// @prop {Map} active-background [color: ('gray', 900, 0.5)] - The active background color of the indigo icon button.
/// @prop {Map} active-foreground [color: ('gray', 700)] - The active text color of the indigo icon button.
/// @prop {Color} border-color [transparent] - The border color of the indigo icon button.
/// @prop {Map} focus-border-color [color: ('gray', 900, 0.15)] - The focus border color of the indigo icon button.
/// @prop {Color} disabled-background [transparent] - The disabled background color of the indigo icon button.
/// @prop {Map} disabled-foreground [color: ('gray', 900, 0.20)] - The disabled foreground color of the indigo icon button.
/// @prop {Color} disabled-border-color [transparent] - The disabled border color of the indigo icon button.
/// @prop {List} border-radius [(rem(40px), rem(0), rem(40px))] - The border radius used for the indigo icon button.
/// @prop {List} size [(rem(24px), rem(28px), rem(32px))] - The size used for the indigo icon button.
/// @prop {Number} default-size [2] - The default size used for the icon button.
/// @prop {Map} typography [text: (value: 'button')] - The typography styles used for the component.
$indigo-base-icon-button: (
    shadow-color: (
        color: (
            'gray',
            900,
            0.15,
        ),
    ),
    background: transparent,
    foreground: (
        color: (
            'gray',
            600,
        ),
    ),
    hover-background: (
        color: (
            'gray',
            900,
            0.05,
        ),
    ),
    hover-foreground: (
        color: (
            'gray',
            700,
        ),
    ),
    focus-background: transparent,
    focus-foreground: (
        color: (
            'gray',
            600,
        ),
    ),
    focus-hover-background: (
        color: (
            'gray',
            900,
            0.05,
        ),
    ),
    focus-hover-foreground: (
        color: (
            'gray',
            700,
        ),
    ),
    active-background: (
        color: (
            'gray',
            900,
            0.05,
        ),
    ),
    active-foreground: (
        color: (
            'gray',
            700,
        ),
    ),
    border-color: transparent,
    focus-border-color: (
        color: (
            'gray',
            900,
            0.15,
        ),
    ),
    disabled-background: transparent,
    disabled-foreground: (
        color: (
            'gray',
            900,
            0.2,
        ),
    ),
    disabled-border-color: transparent,
    border-radius: (
        border-radius: (
            rem(40px),
            rem(0),
            rem(40px),
        ),
    ),
    size: (
        sizable: (
            rem(24px),
            rem(28px),
            rem(32px),
        ),
    ),
    default-size: 2,
    typography: (
        text: (
            value: 'button',
        ),
    ),
);

/// Generates an indigo flat icon button schema.
/// @type {Map}
/// @requires {Map} $indigo-base-icon-button
$indigo-flat-icon-button: extend(
    $indigo-base-icon-button,
    (
        selector: '[igxIconButton="flat"], .igx-icon-button--flat',
        _meta: (
            theme: 'indigo',
            variant: 'light',
            type: 'flat',
        ),
    )
);

/// Generates an indigo outlined icon button schema.
/// @type {Map}
/// @prop {Map} border-color [color: ('gray', 500)] - The border color of the indigo outlined icon button.
/// @prop {Map} disabled-border-color [color: ('gray', 900, 0.15)] - The disabled border color of the indigo outlined icon button.
/// @requires {Map} $indigo-base-icon-button
$indigo-outlined-icon-button: extend(
    $indigo-base-icon-button,
    (
        selector: '[igxIconButton="outlined"], .igx-icon-button--outlined',
        border-color: (
            color: (
                'gray',
                500,
            ),
        ),
        disabled-border-color: (
            color: (
                'gray',
                900,
                0.15,
            ),
        ),
        _meta: (
            theme: 'indigo',
            variant: 'light',
            type: 'outlined',
        ),
    )
);

/// Generates an indigo contained icon button schema.
/// @type {Map}
/// @prop {Map} shadow-color [color: ('primary', 400, 0.5)] - The shadow color of the indigo contained icon button.
/// @prop {Map} background [color: ('primary', 500)] - The background color of the indigo contained icon button.
/// @prop {Map} foreground [contrast-color: ('primary', 500, .8)] - The idle text color of the indigo contained icon button.
/// @prop {Map} hover-background [color: ('primary', 400)] - The hover background color of the indigo contained icon button.
/// @prop {Map} hover-foreground [contrast-color: ('primary', 500)] - The hover text color of the indigo contained icon button.
/// @prop {Map} focus-background [color: ('primary', 500)] - The focus background color of the indigo contained icon button.
/// @prop {Map} focus-foreground [contrast-color: ('primary', 500, .8)] - The focus background color of the indigo contained icon button.
/// @prop {Map} focus-border-color [color: ('primary', 400, .5)] - The focus border color of the indigo icon button.
/// @prop {Map} focus-hover-background [color: ('primary', 400)] - The background color on focus hovered state of the icon button.
/// @prop {Map} focus-hover-foreground [color: ('primary', 500)] - The foreground color on focus hovered state of the icon button.
/// @prop {Map} active-background [color: ('primary', 400)] - The active background color of the indigo contained icon button.
/// @prop {Map} active-foreground [contrast-color: ('primary', 500)] - The active background color of the indigo contained icon button.
/// @prop {Map} disabled-background [color: ('primary', 400, .5)] - The disabled background color of the indigo contained icon button.
/// @prop {Map} disabled-foreground [contrast-color: ('primary', 500, .3)] - The disabled foreground color of the indigo icon button.
/// @requires {Map} $indigo-base-icon-button
$indigo-contained-icon-button: extend(
    $indigo-base-icon-button,
    (
        selector: '[igxIconButton="contained"], .igx-icon-button--contained',
        shadow-color: (
            color: (
                'primary',
                400,
                0.5,
            ),
        ),
        background: (
            color: (
                'primary',
                500,
            ),
        ),
        foreground: (
            contrast-color: (
                'primary',
                500,
                0.8,
            ),
        ),
        hover-background: (
            color: (
                'primary',
                400,
            ),
        ),
        hover-foreground: (
            contrast-color: (
                'primary',
                500,
            ),
        ),
        focus-background: (
            color: (
                'primary',
                500,
            ),
        ),
        focus-foreground: (
            contrast-color: (
                'primary',
                500,
                0.8,
            ),
        ),
        focus-border-color: (
            color: (
                'primary',
                400,
                0.5,
            ),
        ),
        focus-hover-background: (
            color: (
                'primary',
                400,
            ),
        ),
        focus-hover-foreground: (
            contrast-color: (
                'primary',
                500,
            ),
        ),
        active-background: (
            color: (
                'primary',
                400,
            ),
        ),
        active-foreground: (
            contrast-color: (
                'primary',
                500,
            ),
        ),
        disabled-background: (
            color: (
                'primary',
                400,
                0.5,
            ),
        ),
        disabled-foreground: (
            contrast-color: (
                'primary',
                500,
                0.3,
            ),
        ),
        _meta: (
            theme: 'indigo',
            variant: 'light',
            type: 'contained',
        ),
    )
);

/// Generates a light indigo icon button schema.
/// @type {Map}
/// @requires {Map} $indigo-flat-icon-button
/// @requires {Map} $indigo-contained-icon-button
/// @requires {Map} $indigo-outlined-icon-button
$indigo-icon-button: (
    flat: $indigo-flat-icon-button,
    contained: $indigo-contained-icon-button,
    outlined: $indigo-outlined-icon-button,
);