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

/// The background color of the Badge.
/// @group badge
$kendo-badge-bg: k-color(surface-alt) !default;
/// The text color of the Badge.
/// @group badge
$kendo-badge-text: k-color(on-app-surface) !default;
/// The border color of the Badge.
/// @group badge
$kendo-badge-border: color-mix(in srgb, k-color(border) 16%, transparent) !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: secondary,
    tertiary: tertiary,
 ) !default;

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

$_tc-badge-warning-matrix: (
    solid: (
        normal: (color, on-color, color)
    ),
    outline: (
        normal: (transparent, color, color)
    )
) !default;

$_tc-badge-dark-matrix: (
    solid: (
        normal: (color, on-color, color)
    ),
    outline: (
        normal: (transparent, color, color)
    )
) !default;

$_tc-badge-light-matrix: (
    solid: (
        normal: (color, on-color, color)
    ),
    outline: (
        normal: (transparent, color, color)
    )
) !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, dark, $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, light, $ui-states )
    );
}