@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: secondary,
    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: (color, on-color, border),
        hover: (color-hover, on-color, border),
        focus: (color, on-color, border, on-color),
        focus-hover: (color-hover, on-color, border, on-color),
        active: (color-active, on-color, border),
        active-hover: (color-hover, on-color, border),
        disabled: (color-mix(in srgb, k-color(on-app-surface) 6%, transparent), color-mix(in srgb, k-color(on-app-surface) 46%, transparent), transparent)
    ),
    outline: (
        normal: (transparent, color-on-surface, currentColor),
        hover: (on-color, color, on-color),
        focus: (transparent, color-on-surface, currentColor, inherit),
        focus-hover: (on-color, color, on-color, inherit),
        active: (on-color, color, on-color),
        active-hover: (on-color, color, on-color),
        disabled: (initial, color-mix(in srgb, k-color(on-app-surface) 46%, transparent), color-mix(in srgb, k-color(on-app-surface) 46%, transparent))
    ),
    link: (
        normal: (transparent, on-color, transparent),
        hover: (transparent, on-color, transparent),
        focus: (transparent, on-color, transparent, color-subtle-active),
        focus-hover: (transparent, on-color, color-subtle-active, transparent),
        active: (transparent, on-color, transparent),
        active-hover: (transparent, on-color, transparent),
        disabled: (initial, color-mix(in srgb, k-color(on-app-surface) 46%, transparent), initial)
    ),
    clear: (
        normal: (transparent, color-on-surface, transparent),
        hover: (transparent, color-on-surface, transparent),
        focus: (color-subtle, color-on-surface, transparent, color-active),
        focus-hover:  (transparent, color-on-surface, transparent, color-active),
        active: (transparent, color-on-surface, transparent),
        active-hover: (transparent, color-on-surface, transparent),
        disabled: (initial, color-mix(in srgb, k-color(on-app-surface) 46%, transparent), initial)
    )
) !default;

// The color matrix for primary, error, success, info, secondary, tertiary Buttons
$_tc-brand-matrix: (
    solid: (
        normal: (color, on-color, color),
        hover: (color-hover, on-color, color-hover),
        focus: (color, on-color, color, inherit),
        focus-hover: (color-hover, on-color, color-hover, inherit),
        active: (color-active, on-color, color-active),
        active-hover: (color-hover, on-color, color-hover),
        disabled: (color-mix(in srgb, k-color(on-app-surface) 6%, transparent), color-mix(in srgb, k-color(on-app-surface) 46%, transparent), transparent)
    ),
    flat: (
        normal: (initial, color-on-surface, transparent),
        hover: (color-subtle, color-hover, transparent),
        focus: (initial, color-on-surface, transparent, color-subtle-active),
        focus-hover: (color-subtle, color-hover, transparent, color-subtle-active),
        active: (color-subtle-hover, color-hover, transparent),
        active-hover: (color-subtle, color-hover, transparent),
        disabled: (initial, color-mix(in srgb, k-color(on-app-surface) 46%, transparent), initial)
    ),
    outline: (
        normal: (transparent, color-on-surface, currentColor),
        hover: (color, on-color, color),
        focus: (transparent, color-on-surface, color, inherit),
        focus-hover: (color, on-color, color, inherit),
        active: (color, on-color, color),
        active-hover: (color, on-color, color),
        disabled: (initial, color-mix(in srgb, k-color(on-app-surface) 46%, transparent), color-mix(in srgb, k-color(on-app-surface) 46%, transparent))
    ),
    link: (
        normal: (transparent, color, transparent),
        hover: (transparent, color-hover, transparent),
        focus: (transparent, color, transparent, color-subtle-active),
        focus-hover: (transparent, color-hover, transparent, color-subtle-active),
        active: (transparent, color-active, transparent),
        active-hover: (transparent, color-hover, transparent),
        disabled: (initial, color-mix(in srgb, k-color(on-app-surface) 46%, transparent), initial)
    ),
    clear: (
        normal: (transparent, color-on-surface, transparent),
        hover: (transparent, color-on-surface, transparent),
        focus: (color-subtle, color-on-surface, transparent),
        focus-hover: (transparent, color-on-surface, transparent),
        active: (transparent, color-on-surface, transparent),
        active-hover: (transparent, color-on-surface, transparent),
        disabled: (initial, color-mix(in srgb, k-color(on-app-surface) 46%, transparent), initial)
    )
) !default;

// The color matrix for warning Buttons
$_tc-warning-matrix: (
    solid: (
        normal: (color, on-color, color),
        hover: (color-hover, on-color, color-hover),
        focus: (color, on-color, color, app-surface),
        focus-hover: (color-hover, on-color, color-hover, app-surface),
        active: (color-active, on-color, color-active),
        active-hover: (color-hover, on-color, color-hover),
        disabled: (color-mix(in srgb, k-color(on-app-surface) 6%, transparent), color-mix(in srgb, k-color(on-app-surface) 46%, transparent), transparent)
    ),
    flat: (
        normal: (initial, color-on-surface, transparent),
        hover: (color-subtle, color-hover, transparent),
        focus: (initial, color-on-surface, transparent, color-subtle-active),
        focus-hover: (color-subtle, color-hover, transparent, color-subtle-active),
        active: (color-subtle-hover, color-hover, transparent),
        active-hover: (color-subtle, color-hover, transparent),
        disabled: (initial, color-mix(in srgb, k-color(on-app-surface) 46%, transparent), initial)
    ),
    outline: (
        normal: (transparent, color-on-surface, currentColor),
        hover: (color, on-color, color),
        focus: (transparent, color-on-surface, color-on-surface, inherit),
        focus-hover: (color, on-color, color, inherit),
        active: (color, on-color, color),
        active-hover: (color, on-color, color),
        disabled: (initial, color-mix(in srgb, k-color(on-app-surface) 46%, transparent), color-mix(in srgb, k-color(on-app-surface) 46%, transparent))
    ),
    link: (
        normal: (transparent, color, transparent),
        hover: (transparent, color-hover, transparent),
        focus: (transparent, color, color-subtle-active),
        focus-hover: (transparent, color-hover, transparent, color-subtle-active),
        active: (transparent, color-active, transparent),
        active-hover: (transparent, color-hover, transparent),
        disabled: (initial, color-mix(in srgb, k-color(on-app-surface) 46%, transparent), initial),
    ),
    clear: (
        normal: (transparent, color-on-surface, transparent),
        hover: (transparent, color-on-surface, transparent),
        focus: (color-subtle, color-on-surface, transparent),
        focus-hover: (transparent, color-on-surface, transparent),
        active: (transparent, color-on-surface, transparent),
        active-hover: (transparent, color-on-surface, transparent),
        disabled: (initial, color-mix(in srgb, k-color(on-app-surface) 46%, transparent), initial),
    )
) !default;

// The color matrix for dark Buttons
$_tc-dark-matrix: (
    solid: (
        normal: (color, on-color, color),
        hover: (color-hover, on-color, color-hover),
        focus: (color, on-color, color, on-color),
        focus-hover: (color-hover, on-color, color-hover, on-color),
        active: (color-active, on-color, color-active),
        active-hover: (color-hover, on-color, color-hover),
        disabled: (color-mix(in srgb, k-color(on-app-surface) 6%, transparent), color-mix(in srgb, k-color(on-app-surface) 46%, transparent), transparent),
    ),
    flat: (
        normal: (initial, color-on-surface, transparent),
        hover: (color-subtle, color-hover, transparent),
        focus: (initial, color-on-surface, transparent, color-subtle-active),
        focus-hover: (color-subtle, color-hover, transparent, color-subtle-active),
        active: (color-subtle-hover, color-hover, transparent),
        active-hover: (color-subtle, color-hover, transparent),
        disabled: (initial, color-mix(in srgb, k-color(on-app-surface) 46%, transparent), initial)
    ),
    outline: (
        normal: (transparent, color-on-surface, currentColor),
        hover: (color, on-color, color),
        focus: (transparent, color-on-surface, color, inherit),
        focus-hover: (color, on-color, color, inherit),
        active: (color, on-color, color),
        active-hover: (color, on-color, color),
        disabled: (initial, color-mix(in srgb, k-color(on-app-surface) 46%, transparent), color-mix(in srgb, k-color(on-app-surface) 46%, transparent))
    ),
    link: (
        normal: (transparent, color, transparent),
        hover: (transparent, color-hover, transparent),
        focus: (transparent, color, color-subtle-active),
        focus-hover: (transparent, color-hover, transparent, color-subtle-active),
        active: (transparent, color-active, transparent),
        active-hover: (transparent, color-hover, transparent),
        disabled: (initial, color-mix(in srgb, k-color(on-app-surface) 46%, transparent), initial)
    ),
    clear: (
        normal: (transparent, color-on-surface, transparent),
        hover: (transparent, color-on-surface, transparent),
        focus: (color-subtle, color-on-surface, transparent),
        focus-hover: (transparent, color-on-surface, transparent),
        active: (transparent, color-on-surface, transparent),
        active-hover: (transparent, color-on-surface, transparent),
        disabled: (initial, color-mix(in srgb, k-color(on-app-surface) 46%, transparent), initial)
    )
) !default;

// The color matrix for light Buttons
$_tc-light-matrix: (
    solid: (
        normal: (color, on-color, color),
        hover: (color-hover, on-color, color-hover),
        focus: (color, on-color, color, app-surface),
        focus-hover: (color-hover, on-color, color-hover, app-surface),
        active: (color-active, on-color, color-active),
        active-hover: (color-hover, on-color, color-hover),
        disabled: (color-mix(in srgb, k-color(on-app-surface) 6%, transparent), color-mix(in srgb, k-color(on-app-surface) 46%, transparent), transparent)
    ),
    flat: (
        normal: (initial, color-on-surface, transparent),
        hover: (color-subtle, color-hover, transparent),
        focus: (initial, color-on-surface, transparent, color-subtle-active),
        focus-hover: (color-subtle, color-hover, transparent, color-subtle-active),
        active: (color-subtle-hover, color-hover, transparent),
        active-hover: (color-subtle, color-hover, transparent),
        disabled: (initial, color-mix(in srgb, k-color(on-app-surface) 46%, transparent), initial)
    ),
    outline: (
        normal: (transparent, color-on-surface, currentColor),
        hover: (color, on-color, color),
        focus: (transparent, color-on-surface, color, inherit),
        focus-hover: (color, on-color, color, inherit),
        active: (color, on-color, color),
        active-hover: (color, on-color, color),
        disabled: (initial, color-mix(in srgb, k-color(on-app-surface) 46%, transparent), color-mix(in srgb, k-color(on-app-surface) 46%, transparent)),
    ),
    link: (
        normal: (transparent, color, transparent),
        hover: (transparent, color-hover, transparent),
        focus: (transparent, color, color-subtle-active),
        focus-hover: (transparent, color-hover, transparent, color-subtle-active),
        active: (transparent, color-active, transparent),
        active-hover: (transparent, color-hover, transparent),
        disabled: (initial, color-mix(in srgb, k-color(on-app-surface) 46%, transparent), initial)
    ),
    clear: (
        normal: (transparent, color-on-surface, transparent),
        hover: (transparent, color-on-surface, transparent),
        focus: (color-subtle, color-on-surface, transparent),
        focus-hover: (transparent, color-on-surface, transparent),
        active: (transparent, color-on-surface, transparent),
        active-hover: (transparent, color-on-surface, transparent),
        disabled: (initial, color-mix(in srgb, k-color(on-app-surface) 46%, transparent), initial)
    )
) !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, base, $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, dark, $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, light, $ui-states )
    );
}