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

/// The background color of the Badge.
/// @group badge
$kendo-badge-bg: var( --kendo-component-bg, initial ) !default;
/// The text color of the Badge.
/// @group badge
$kendo-badge-text: var( --kendo-component-text, initial ) !default;
/// The border color of the Badge.
/// @group badge
$kendo-badge-border: var( --kendo-component-border, initial ) !default;

/// The border width of the Badge.
/// @group badge
$kendo-badge-border-width: 1px !default;

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

/// Horizontal padding of the small Badge.
/// @group badge
$kendo-badge-sm-padding-x: k-spacing(0.5) !default;
/// Horizontal padding of the medium Badge.
/// @group badge
$kendo-badge-md-padding-x: k-spacing(1) !default;
/// Horizontal padding of the large Badge.
/// @group badge
$kendo-badge-lg-padding-x: k-spacing(1.5) !default;

/// Vertical padding of the small Badge.
/// @group badge
$kendo-badge-sm-padding-y: k-spacing(0.5) !default;
/// Vertical padding of the medium Badge.
/// @group badge
$kendo-badge-md-padding-y: k-spacing(1) !default;
/// Vertical padding of the large Badge.
/// @group badge
$kendo-badge-lg-padding-y: k-spacing(1.5) !default;

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

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

/// The calculated minimum width of the small circular Badge.
/// @group badge
$kendo-badge-sm-min-width: calc( #{$kendo-badge-sm-line-height} * 1em + #{$kendo-badge-sm-padding-y} * 2 + #{$kendo-badge-border-width} * 2 ) !default;
/// The calculated minimum width of the medium circular Badge.
/// @group badge
$kendo-badge-md-min-width: calc( #{$kendo-badge-md-line-height} * 1em + #{$kendo-badge-md-padding-y} * 2 + #{$kendo-badge-border-width} * 2 ) !default;
/// The calculated minimum width of the large circular Badge.
/// @group badge
$kendo-badge-lg-min-width: calc( #{$kendo-badge-lg-line-height} * 1em + #{$kendo-badge-lg-padding-y} * 2 + #{$kendo-badge-border-width} * 2 ) !default;


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


/// The theme variations for the Badge.
/// @group badge
$kendo-badge-brand-colors: (
    primary: primary,
    error: error,
    success: success,
    info: info,
    secondary: if($kendo-enable-color-system, secondary, neutral),
    tertiary: tertiary,
 ) !default;

// Matrices with Badge theme colors in the order: bg, color, border
$_tc-badge-matrix: (
    solid: (
        normal: if($kendo-enable-color-system, (color, on-color, color), (100, $kendo-color-white, 100))
    ),
    outline: (
        normal: if($kendo-enable-color-system, (transparent, color, color), ($kendo-color-white, 100, 100))
    )
) !default;

$_tc-badge-warning-matrix: (
    solid: (
        normal: if($kendo-enable-color-system, (color, on-color, color), (100, k-get-theme-color-var( neutral-160 ), 100))
    ),
    outline: (
        normal: if($kendo-enable-color-system, (transparent, color, color), ($kendo-color-white, 100, 100))
    )
) !default;

$_tc-badge-dark-matrix: (
    solid: (
        normal: if($kendo-enable-color-system, (color, on-color, color), (160, $kendo-color-white, 160))
    ),
    outline: (
        normal: if($kendo-enable-color-system, (transparent, color, color), ($kendo-color-white, 160, 160))
    )
) !default;

$_tc-badge-light-matrix: (
    solid: (
        normal: if($kendo-enable-color-system, (color, on-color, color), (50, 160, 50))
    ),
    outline: (
        normal: if($kendo-enable-color-system, (transparent, color, color), ($kendo-color-white, 50, 50))
    )
) !default;

/// The theme colors map for the Badge variations.
/// @group badge
$kendo-badge-theme-colors: () !default;

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

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

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

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