@use "sass:color";
@use "sass:map";
@use "../core/_index.scss" as *;

/// The width of the border around the Button.
/// @group button
$kendo-button-border-width: 1px !default;

/// The horizontal padding of the small Button.
/// @group button
$kendo-button-sm-padding-x: k-spacing(5) !default;
/// The horizontal padding of the medium Button.
/// @group button
$kendo-button-md-padding-x: k-spacing(5) !default;
/// The horizontal padding of the large Button.
/// @group button
$kendo-button-lg-padding-x: k-spacing(5) !default;

/// The vertical padding of the small Button.
/// @group button
$kendo-button-sm-padding-y: k-spacing(1) !default;
/// The vertical padding of the medium Button.
/// @group button
$kendo-button-md-padding-y: k-spacing(1.5) !default;
/// The vertical padding of the large Button.
/// @group button
$kendo-button-lg-padding-y: k-spacing(2) !default;

/// The font size of the small Button.
/// @group button
$kendo-button-sm-font-size: var( --kendo-font-size, inherit ) !default;
/// The font size of the medium Button.
/// @group button
$kendo-button-md-font-size: var( --kendo-font-size, inherit ) !default;
/// The font size of the large Button.
/// @group button
$kendo-button-lg-font-size: var( --kendo-font-size, inherit ) !default;

/// The line height used along with the $kendo-font-size variable of the small Button.
/// @group button
$kendo-button-sm-line-height: var( --kendo-line-height, normal ) !default;
/// The line height used along with the $kendo-font-size variable of the medium Button.
/// @group button
$kendo-button-md-line-height: var( --kendo-line-height, normal ) !default;
/// The line height used along with the $kendo-font-size variable of the large Button.
/// @group button
$kendo-button-lg-line-height: var( --kendo-line-height, normal ) !default;

/// The font family of the Button.
/// @group button
$kendo-button-font-family: var( --kendo-font-family, inherit ) !default;

/// The font weight of the Button.
/// @group button
$kendo-button-font-weight: var( --kendo-font-weight-bold, normal ) !default;

/// The calculated height of the Button.
/// @group button
$kendo-button-calc-size: calc( ( #{$kendo-button-md-line-height} * 1em ) + ( #{$kendo-button-md-padding-y} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) !default;
$kendo-button-sm-calc-size: calc( ( #{$kendo-button-sm-line-height} * 1em ) + ( #{$kendo-button-sm-padding-y} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) !default;
$kendo-button-md-calc-size: calc( ( #{$kendo-button-md-line-height} * 1em ) + ( #{$kendo-button-md-padding-y} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) !default;
$kendo-button-lg-calc-size: calc( ( #{$kendo-button-lg-line-height} * 1em ) + ( #{$kendo-button-lg-padding-y} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) !default;

/// The calculated inner height of the Button excluding the border width.
/// @group button
$kendo-button-inner-calc-size: calc( ( #{$kendo-button-md-line-height} * 1em ) + ( #{$kendo-button-md-padding-y} * 2 ) ) !default;
$kendo-button-sm-inner-calc-size: calc( ( #{$kendo-button-sm-line-height} * 1em ) + ( #{$kendo-button-sm-padding-y} * 2 ) ) !default;
$kendo-button-md-inner-calc-size: calc( ( #{$kendo-button-md-line-height} * 1em ) + ( #{$kendo-button-md-padding-y} * 2 ) ) !default;
$kendo-button-lg-inner-calc-size: calc( ( #{$kendo-button-lg-line-height} * 1em ) + ( #{$kendo-button-lg-padding-y} * 2 ) ) !default;

/// The sizes map for the Button.
/// @group button
$kendo-button-sizes: (
    sm: (
        padding-x: $kendo-button-sm-padding-x,
        padding-y: $kendo-button-sm-padding-y,
        font-size: $kendo-button-sm-font-size,
        line-height: $kendo-button-sm-line-height
    ),
    md: (
        padding-x: $kendo-button-md-padding-x,
        padding-y: $kendo-button-md-padding-y,
        font-size: $kendo-button-md-font-size,
        line-height: $kendo-button-md-line-height
    ),
    lg: (
        padding-x: $kendo-button-lg-padding-x,
        padding-y: $kendo-button-lg-padding-y,
        font-size: $kendo-button-lg-font-size,
        line-height: $kendo-button-lg-line-height
    )
) !default;

/// The content spacing of the Button.
/// @group button
$kendo-button-spacing: k-spacing(2) !default;

/// The offset of the focused Button.
/// @group button
$kendo-button-focus-offset: k-spacing(0.5) !default;
/// The Outline width of the focused Button.
/// @group button
$kendo-button-focus-outline-width: 1px !default;
/// The outline style of the focused Button.
/// @group button
$kendo-button-focus-outline-style: solid !default;

/// The offset of the flat focused Button.
/// @group button
$kendo-button-flat-focus-offset: 1px !default;
/// The outline width of the flat focused Button.
/// @group button
$kendo-button-flat-focus-outline-width: k-spacing(0.5) !default;

/// The offset of the link focused Button.
/// @group button
$kendo-button-link-focus-offset: 0 !default;
/// The outline width of the flat focused Button.
/// @group button
$kendo-button-link-focus-outline-width: 1px !default;

// The theme variations for the Button.

$kendo-button-brand-colors: (
    primary: primary,
    error: error,
    success: success,
    info: info,
    secondary: if($kendo-enable-color-system, secondary, neutral),
    tertiary: tertiary,
) !default;


// Matrices with theme colors in the order: bg, color, border, outline

// The color matrix for the base Button
$_tc-base-matrix: (
    solid: (
        normal: if($kendo-enable-color-system, (color, on-color, border), ($kendo-color-white, 160, 110)),
        hover: if($kendo-enable-color-system, (color-hover, on-color, border), (20, 190, 110)),
        focus: if($kendo-enable-color-system, (color, on-color, border, on-color), ($kendo-color-white, 160, 110, 130)),
        focus-hover: if($kendo-enable-color-system, (color-hover, on-color, border, on-color), (20, 190, 110, 130)),
        active: if($kendo-enable-color-system, (color-active, on-color, border), (30, 190, 110)),
        active-hover: if($kendo-enable-color-system, (color-hover, on-color, border), (20, 190, 110)),
        disabled: if($kendo-enable-color-system, (color-mix(in srgb, k-color( on-app-surface ) 6%, transparent), color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), transparent), (var( --kendo-disabled-bg, inherit ), var( --kendo-disabled-text, inherit ), var( --kendo-disabled-border, inherit )))
    ),
    outline: (
        normal: if($kendo-enable-color-system, (transparent, color-on-surface, currentColor), (transparent, 160, currentColor)),
        hover: if($kendo-enable-color-system, (on-color, color, on-color), (190, $kendo-color-white, 190)),
        focus: if($kendo-enable-color-system, (transparent, color-on-surface, currentColor, inherit), (transparent, 160, currentColor, inherit)),
        focus-hover: if($kendo-enable-color-system, (on-color, color, on-color, inherit), (190, $kendo-color-white, 190, inherit)),
        active: if($kendo-enable-color-system, (on-color, color, on-color), (190, $kendo-color-white, 190)),
        active-hover: if($kendo-enable-color-system, (on-color, color, on-color), (20, 190, 110)),
        disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), color-mix(in srgb, k-color( on-app-surface ) 46%, transparent)), (initial, var( --kendo-disabled-text, inherit ), 90))
    ),
    link: (
        normal: if($kendo-enable-color-system, (transparent, on-color, transparent), (transparent, 160, transparent)),
        hover: if($kendo-enable-color-system, (transparent, on-color, transparent), (transparent, 190, transparent)),
        focus: if($kendo-enable-color-system, (transparent, on-color, transparent, color-subtle-active), (transparent, 160, transparent, 30)),
        focus-hover: if($kendo-enable-color-system, (transparent, on-color, color-subtle-active, transparent), (transparent, 190, 30, transparent)),
        active: if($kendo-enable-color-system, (transparent, on-color, transparent), (transparent, 190, transparent)),
        active-hover: if($kendo-enable-color-system, (transparent, on-color, transparent), (transparent, 190, transparent)),
        disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (initial, var( --kendo-disabled-text, inherit ), transparent))
    ),
    clear: (
        normal: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 160, transparent)),
        hover: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 190, transparent)),
        focus: if($kendo-enable-color-system, (color-subtle, color-on-surface, transparent, color-active), (30, 160, transparent, 130)),
        focus-hover:  if($kendo-enable-color-system, (transparent, color-on-surface, transparent, color-active), (transparent, 190, transparent, 130)),
        active: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 190, transparent)),
        active-hover: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 190, transparent)),
        disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (initial, var( --kendo-disabled-text, inherit ), transparent))
    )
) !default;

// The color matrix for primary, error, success, info, secondary, tertiary Buttons
$_tc-brand-matrix: (
    solid: (
        normal: if($kendo-enable-color-system, (color, on-color, color), (100, $kendo-color-white, 100)),
        hover: if($kendo-enable-color-system, (color-hover, on-color, color-hover), (110, $kendo-color-white, 110)),
        focus: if($kendo-enable-color-system, (color, on-color, color, inherit), (100, $kendo-color-white, 100, inherit)),
        focus-hover: if($kendo-enable-color-system, (color-hover, on-color, color-hover, inherit), (110, $kendo-color-white, 110, inherit)),
        active: if($kendo-enable-color-system, (color-active, on-color, color-active), (120, $kendo-color-white, 120)),
        active-hover: if($kendo-enable-color-system, (color-hover, on-color, color-hover), (110, $kendo-color-white, 110)),
        disabled: if($kendo-enable-color-system, (color-mix(in srgb, k-color( on-app-surface ) 6%, transparent), color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), transparent), (var( --kendo-disabled-bg, inherit ), var( --kendo-disabled-text, inherit ), var( --kendo-disabled-border, inherit )))
    ),
    flat: (
        normal: if($kendo-enable-color-system, (initial, color-on-surface, transparent), (initial, 100, transparent)),
        hover: if($kendo-enable-color-system, (color-subtle, color-hover, transparent), (10, 110, transparent)),
        focus: if($kendo-enable-color-system, (initial, color-on-surface, transparent, color-subtle-active), (initial, 100, transparent, 30)),
        focus-hover: if($kendo-enable-color-system, (color-subtle, color-hover, transparent, color-subtle-active), (10, 110, transparent, 30)),
        active: if($kendo-enable-color-system, (color-subtle-hover, color-hover, transparent), (20, 110, transparent)),
        active-hover: if($kendo-enable-color-system, (color-subtle, color-hover, transparent), (10, 110, transparent)),
        disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (initial, var( --kendo-disabled-text, inherit ), initial))
    ),
    outline: (
        normal: if($kendo-enable-color-system, (transparent, color-on-surface, currentColor), (transparent, 100, currentColor)),
        hover: if($kendo-enable-color-system, (color, on-color, color), (100, $kendo-color-white, 100)),
        focus: if($kendo-enable-color-system, (transparent, color-on-surface, color, inherit), (transparent, 100, 100, inherit)),
        focus-hover: if($kendo-enable-color-system, (color, on-color, color, inherit), (100, $kendo-color-white, 100, inherit)),
        active: if($kendo-enable-color-system, (color, on-color, color), (100, $kendo-color-white, 100)),
        active-hover: if($kendo-enable-color-system, (color, on-color, color), (100, $kendo-color-white, 100)),
        disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), color-mix(in srgb, k-color( on-app-surface ) 46%, transparent)), (initial, var( --kendo-disabled-text, inherit ), var( --kendo-disabled-text, inherit )))
    ),
    link: (
        normal: if($kendo-enable-color-system, (transparent, color, transparent), (transparent, 100, transparent)),
        hover: if($kendo-enable-color-system, (transparent, color-hover, transparent), (transparent, 130, transparent)),
        focus: if($kendo-enable-color-system, (transparent, color, transparent, color-subtle-active), (transparent, 100, transparent, 30)),
        focus-hover: if($kendo-enable-color-system, (transparent, color-hover, transparent, color-subtle-active), (transparent, 130, transparent, 30)),
        active: if($kendo-enable-color-system, (transparent, color-active, transparent), (transparent, 140, transparent)),
        active-hover: if($kendo-enable-color-system, (transparent, color-hover, transparent), (transparent, 130, transparent)),
        disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (initial, var( --kendo-disabled-text, inherit ), transparent))
    ),
    clear: (
        normal: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 100, transparent)),
        hover: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 110, transparent)),
        focus: if($kendo-enable-color-system, (color-subtle, color-on-surface, transparent), (20, 100, transparent)),
        focus-hover: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 110, transparent)),
        active: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 120, transparent)),
        active-hover: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 110, transparent)),
        disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (initial, var( --kendo-disabled-text, inherit ), transparent))
    )
) !default;

// The color matrix for warning Buttons
$_tc-warning-matrix: (
    solid: (
        normal: if($kendo-enable-color-system, (color, on-color, color), (100, k-get-theme-color-var( neutral-160 ), 100)),
        hover: if($kendo-enable-color-system, (color-hover, on-color, color-hover), (110, k-get-theme-color-var( neutral-190 ), 110)),
        focus: if($kendo-enable-color-system, (color, on-color, color, app-surface), (100, k-get-theme-color-var( neutral-160 ), 100, $kendo-color-white)),
        focus-hover: if($kendo-enable-color-system, (color-hover, on-color, color-hover, app-surface), (110, k-get-theme-color-var( neutral-190 ), 110, $kendo-color-white)),
        active: if($kendo-enable-color-system, (color-active, on-color, color-active), (120, k-get-theme-color-var( neutral-190 ), 120)),
        active-hover: if($kendo-enable-color-system, (color-hover, on-color, color-hover), (110, k-get-theme-color-var( neutral-190 ), 110)),
        disabled: if($kendo-enable-color-system, (color-mix(in srgb, k-color( on-app-surface ) 6%, transparent), color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), transparent), (var( --kendo-disabled-bg, inherit ), var( --kendo-disabled-text, inherit ), var( --kendo-disabled-border, inherit )))
    ),
    flat: (
        normal: if($kendo-enable-color-system, (initial, color-on-surface, transparent), (initial, 100, transparent)),
        hover: if($kendo-enable-color-system, (color-subtle, color-hover, transparent), (10, 110, transparent)),
        focus: if($kendo-enable-color-system, (initial, color-on-surface, transparent, color-subtle-active), (initial, 100, transparent, 30)),
        focus-hover: if($kendo-enable-color-system, (color-subtle, color-hover, transparent, color-subtle-active), (10, 110, transparent, 30)),
        active: if($kendo-enable-color-system, (color-subtle-hover, color-hover, transparent), (20, 110, transparent)),
        active-hover: if($kendo-enable-color-system, (color-subtle, color-hover, transparent), (10, 110, transparent)),
        disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (initial, var( --kendo-disabled-text, inherit ), initial))
    ),
    outline: (
        normal: if($kendo-enable-color-system, (transparent, color-on-surface, currentColor), (transparent, 100, currentColor)),
        hover: if($kendo-enable-color-system, (color, on-color, color), (100, $kendo-color-black, 100)),
        focus: if($kendo-enable-color-system, (transparent, color-on-surface, color-on-surface, inherit), (transparent, 100, 100, inherit)),
        focus-hover: if($kendo-enable-color-system, (color, on-color, color, inherit), (100, $kendo-color-black, 100, inherit)),
        active: if($kendo-enable-color-system, (color, on-color, color), (100, $kendo-color-black, 100)),
        active-hover: if($kendo-enable-color-system, (color, on-color, color), (100, $kendo-color-black, 100)),
        disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), color-mix(in srgb, k-color( on-app-surface ) 46%, transparent)), (initial, var( --kendo-disabled-text, inherit ), var( --kendo-disabled-text, inherit )))
    ),
    link: (
        normal: if($kendo-enable-color-system, (transparent, color, transparent), (transparent, 100, transparent)),
        hover: if($kendo-enable-color-system, (transparent, color-hover, transparent), (transparent, 130, transparent)),
        focus: if($kendo-enable-color-system, (transparent, color, color-subtle-active), (transparent, 100, 30)),
        focus-hover: if($kendo-enable-color-system, (transparent, color-hover, transparent, color-subtle-active), (transparent, 130, transparent, 30)),
        active: if($kendo-enable-color-system, (transparent, color-active, transparent), (transparent, 140, transparent)),
        active-hover: if($kendo-enable-color-system, (transparent, color-hover, transparent), (transparent, 130, transparent)),
        disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (initial, var( --kendo-disabled-text, inherit ), transparent))
    ),
    clear: (
        normal: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 100, transparent)),
        hover: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 110, transparent)),
        focus: if($kendo-enable-color-system, (color-subtle, color-on-surface, transparent), (20, 100, transparent)),
        focus-hover: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 110, transparent)),
        active: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 120, transparent)),
        active-hover: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 110, transparent)),
        disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (initial, var( --kendo-disabled-text, inherit ), transparent))
    )
) !default;

// The color matrix for dark Buttons
$_tc-dark-matrix: (
    solid: (
        normal: if($kendo-enable-color-system, (color, on-color, color), (160, $kendo-color-white, 160)),
        hover: if($kendo-enable-color-system, (color-hover, on-color, color-hover), (170, $kendo-color-white, 170)),
        focus: if($kendo-enable-color-system, (color, on-color, color, on-color), (160, $kendo-color-white, 160, $kendo-color-white)),
        focus-hover: if($kendo-enable-color-system, (color-hover, on-color, color-hover, on-color), (170, $kendo-color-white, 170, $kendo-color-white)),
        active: if($kendo-enable-color-system, (color-active, on-color, color-active), (180, $kendo-color-white, 180)),
        active-hover: if($kendo-enable-color-system, (color-hover, on-color, color-hover), (170, $kendo-color-white, 170)),
        disabled: if($kendo-enable-color-system, (color-mix(in srgb, k-color( on-app-surface ) 6%, transparent), color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), transparent), (var( --kendo-disabled-bg, inherit ), var( --kendo-disabled-text, inherit ), var( --kendo-disabled-border, inherit )))
    ),
    flat: (
        normal: if($kendo-enable-color-system, (initial, color-on-surface, transparent), (initial, 160, transparent)),
        hover: if($kendo-enable-color-system, (color-subtle, color-hover, transparent), (10, 170, transparent)),
        focus: if($kendo-enable-color-system, (initial, color-on-surface, transparent, color-subtle-active), (initial, 160, transparent, 30)),
        focus-hover: if($kendo-enable-color-system, (color-subtle, color-hover, transparent, color-subtle-active), (10, 170, transparent, 30)),
        active: if($kendo-enable-color-system, (color-subtle-hover, color-hover, transparent), (20, 170, transparent)),
        active-hover: if($kendo-enable-color-system, (color-subtle, color-hover, transparent), (10, 170, transparent)),
        disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (initial, var( --kendo-disabled-text, inherit ), initial))
    ),
    outline: (
        normal: if($kendo-enable-color-system, (transparent, color-on-surface, currentColor), (transparent, 160, currentColor)),
        hover: if($kendo-enable-color-system, (color, on-color, color), (160, $kendo-color-white, 160)),
        focus: if($kendo-enable-color-system, (transparent, color-on-surface, color, inherit), (transparent, 160, 160, inherit)),
        focus-hover: if($kendo-enable-color-system, (color, on-color, color, inherit), (160, $kendo-color-white, 160, inherit)),
        active: if($kendo-enable-color-system, (color, on-color, color), (160, $kendo-color-white, 160)),
        active-hover: if($kendo-enable-color-system, (color, on-color, color), (160, $kendo-color-white, 160)),
        disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), color-mix(in srgb, k-color( on-app-surface ) 46%, transparent)), (initial, var( --kendo-disabled-text, inherit ), var( --kendo-disabled-text, inherit )))
    ),
    link: (
        normal: if($kendo-enable-color-system, (transparent, color, transparent), (transparent, 160, transparent)),
        hover: if($kendo-enable-color-system, (transparent, color-hover, transparent), (transparent, 170, transparent)),
        focus: if($kendo-enable-color-system, (transparent, color, color-subtle-active), (transparent, 160, 30)),
        focus-hover: if($kendo-enable-color-system, (transparent, color-hover, transparent, color-subtle-active), (transparent, 170, transparent, 30)),
        active: if($kendo-enable-color-system, (transparent, color-active, transparent), (transparent, 170, transparent)),
        active-hover: if($kendo-enable-color-system, (transparent, color-hover, transparent), (transparent, 170, transparent)),
        disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (initial, var( --kendo-disabled-text, inherit ), transparent))
    ),
    clear: (
        normal: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 160, transparent)),
        hover: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 170, transparent)),
        focus: if($kendo-enable-color-system, (color-subtle, color-on-surface, transparent), (20, 160, transparent)),
        focus-hover: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 170, transparent)),
        active: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 170, transparent)),
        active-hover: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 170, transparent)),
        disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (initial, var( --kendo-disabled-text, inherit ), transparent))
    )
) !default;

// The color matrix for light Buttons
$_tc-light-matrix: (
    solid: (
        normal: if($kendo-enable-color-system, (color, on-color, color), (50, 160, 50)),
        hover: if($kendo-enable-color-system, (color-hover, on-color, color-hover), (60, 190, 60)),
        focus: if($kendo-enable-color-system, (color, on-color, color, app-surface), (50, 160, 50, $kendo-color-white)),
        focus-hover: if($kendo-enable-color-system, (color-hover, on-color, color-hover, app-surface), (60, 190, 60, $kendo-color-white)),
        active: if($kendo-enable-color-system, (color-active, on-color, color-active), (70, 190, 70)),
        active-hover: if($kendo-enable-color-system, (color-hover, on-color, color-hover), (60, 190, 60)),
        disabled: if($kendo-enable-color-system, (color-mix(in srgb, k-color( on-app-surface ) 6%, transparent), color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), transparent), (var( --kendo-disabled-bg, inherit ), var( --kendo-disabled-text, inherit ), var( --kendo-disabled-border, inherit )))
    ),
    flat: (
        normal: if($kendo-enable-color-system, (initial, color-on-surface, transparent), (initial, 50, transparent)),
        hover: if($kendo-enable-color-system, (color-subtle, color-hover, transparent), (10, 60, transparent)),
        focus: if($kendo-enable-color-system, (initial, color-on-surface, transparent, color-subtle-active), (initial, 50, transparent, 30)),
        focus-hover: if($kendo-enable-color-system, (color-subtle, color-hover, transparent, color-subtle-active), (10, 60, transparent, 30)),
        active: if($kendo-enable-color-system, (color-subtle-hover, color-hover, transparent), (20, 60, transparent)),
        active-hover: if($kendo-enable-color-system, (color-subtle, color-hover, transparent), (10, 60, transparent)),
        disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (initial, var( --kendo-disabled-text, inherit ), initial))
    ),
    outline: (
        normal: if($kendo-enable-color-system, (transparent, color-on-surface, currentColor), (transparent, 50, currentColor)),
        hover: if($kendo-enable-color-system, (color, on-color, color), (50, $kendo-color-white, 50)),
        focus: if($kendo-enable-color-system, (transparent, color-on-surface, color, inherit), (transparent, 50, 50, inherit)),
        focus-hover: if($kendo-enable-color-system, (color, on-color, color, inherit), (50, $kendo-color-white, 50, inherit)),
        active: if($kendo-enable-color-system, (color, on-color, color), (50, $kendo-color-white, 50)),
        active-hover: if($kendo-enable-color-system, (color, on-color, color), (50, $kendo-color-white, 50)),
        disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), color-mix(in srgb, k-color( on-app-surface ) 46%, transparent)), (initial, var( --kendo-disabled-text, inherit ), var( --kendo-disabled-text, inherit )))
    ),
    link: (
        normal: if($kendo-enable-color-system, (transparent, color, transparent), (transparent, 50, transparent)),
        hover: if($kendo-enable-color-system, (transparent, color-hover, transparent), (transparent, 60, transparent)),
        focus: if($kendo-enable-color-system, (transparent, color, color-subtle-active), (transparent, 50, 30)),
        focus-hover: if($kendo-enable-color-system, (transparent, color-hover, transparent, color-subtle-active), (transparent, 60, transparent, 30)),
        active: if($kendo-enable-color-system, (transparent, color-active, transparent), (transparent, 60, transparent)),
        active-hover: if($kendo-enable-color-system, (transparent, color-hover, transparent), (transparent, 60, transparent)),
        disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (initial, var( --kendo-disabled-text, inherit ), transparent))
    ),
    clear: (
        normal: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 50, transparent)),
        hover: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 60, transparent)),
        focus: if($kendo-enable-color-system, (color-subtle, color-on-surface, transparent), (20, 50, transparent)),
        focus-hover: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 60, transparent)),
        active: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 60, transparent)),
        active-hover: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 60, transparent)),
        disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (initial, var( --kendo-disabled-text, inherit ), transparent))
    )
) !default;

/// The theme colors map for the Button.
/// @group button
$kendo-button-theme-colors: () !default;

// The map for the base theme color
@each $fill-mode, $ui-states in $_tc-base-matrix {
    $kendo-button-theme-colors: map.deep-merge(
        $kendo-button-theme-colors,
        k-generate-fill-mode-theme-variation( $fill-mode, base, if($kendo-enable-color-system, base, neutral), $ui-states )
    );
}

// The map for the brand theme colors
@each $fill-mode, $ui-states in $_tc-brand-matrix {
    @each $brand-color, $palette in $kendo-button-brand-colors {
        $kendo-button-theme-colors: map.deep-merge(
            $kendo-button-theme-colors,
            k-generate-fill-mode-theme-variation( $fill-mode, $brand-color, $palette, $ui-states )
        )
    }
}

// The map for the warning theme colors
@each $fill-mode, $ui-states in $_tc-warning-matrix {
    $kendo-button-theme-colors: map.deep-merge(
        $kendo-button-theme-colors,
        k-generate-fill-mode-theme-variation( $fill-mode, warning, warning, $ui-states )
    );
}

// The map for the dark theme colors
@each $fill-mode, $ui-states in $_tc-dark-matrix {
    $kendo-button-theme-colors: map.deep-merge(
        $kendo-button-theme-colors,
        k-generate-fill-mode-theme-variation( $fill-mode, dark, if($kendo-enable-color-system, dark, neutral), $ui-states )
    );
}

// The map for the light theme colors
@each $fill-mode, $ui-states in $_tc-light-matrix {
    $kendo-button-theme-colors: map.deep-merge(
        $kendo-button-theme-colors,
        k-generate-fill-mode-theme-variation( $fill-mode, light, if($kendo-enable-color-system, light, neutral), $ui-states )
    );
}