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

// Chip

/// The width of the border around the Chip.
/// @group chip
$kendo-chip-border-width: 1px !default;
/// The spacing between the text and the icons of the Chip.
/// @group chip
$kendo-chip-spacing: k-spacing(1) !default;

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

/// The width of the Chip' avatar.
/// @group chip
$kendo-chip-avatar-width: 1em !default;
/// The height of the Chip' avatar.
/// @group chip
$kendo-chip-avatar-height: 1em !default;
/// The flex basis of the Chip' avatar.
/// @group chip
$kendo-chip-avatar-flex-basis: 1em !default;
/// The text color of the disabled Chip.
/// @group chip
$kendo-chip-disabled-text: var( --kendo-disabled-text, inherit ) !default;
/// The background color of the solid disabled Chip.
/// @group chip
$kendo-chip-solid-disabled-bg: var( --kendo-disabled-bg, transparent ) !default;
/// The border color of the solid disabled Chip.
/// @group chip
$kendo-chip-solid-disabled-border: var( --kendo-disabled-border, inherit ) !default;
/// The background color of the outline disabled Chip.
/// @group chip
$kendo-chip-outline-disabled-bg: var( $kendo-component-bg, transparent ) !default;
/// The border color of the outline disabled Chip.
/// @group chip
$kendo-chip-outline-disabled-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), k-get-theme-color-var( neutral-90 )) !default;

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

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

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

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

/// The small Chip's line height that is related to the $kendo-font-size.
/// @group chip
$kendo-chip-sm-line-height: var( --kendo-line-height, normal ) !default;
/// The medium Chip's line height that is related to the $kendo-font-size.
/// @group chip
$kendo-chip-md-line-height: var( --kendo-line-height, normal ) !default;
/// The large Chip's line height that is related to the $kendo-font-size.
/// @group chip
$kendo-chip-lg-line-height: var( --kendo-line-height, normal ) !default;

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

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


$kendo-chip-brand-colors: ( error, success, info ) !default;

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

// The color matrix for the base Chip
$_tc-base-matrix: (
    solid: (
        normal: if($kendo-enable-color-system, (color-subtle, color-on-subtle, color-subtle), (20, 160, 20)),
        hover: if($kendo-enable-color-system, (color-subtle-hover, color-on-subtle, color-subtle-hover), (30, 190, 30)),
        focus: if($kendo-enable-color-system, (color-subtle, color-on-subtle, color-on-subtle), (20, 160, 130)),
        focus-hover: if($kendo-enable-color-system, (color-subtle, color-on-subtle, color-on-subtle), (20, 190, 130)),
        selected: if($kendo-enable-color-system, (k-color( primary ), k-color( on-primary ), k-color( primary )), (k-get-theme-color-var( primary-100 ), $kendo-color-white, k-get-theme-color-var( primary-100 ))),
        selected-hover: if($kendo-enable-color-system, (k-color( primary ), k-color( on-primary ), k-color( primary )), (k-get-theme-color-var( primary-100 ), $kendo-color-white, k-get-theme-color-var( primary-100 ))),
        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, (color-on-surface, app-surface, color-on-surface), (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, (color-on-surface, app-surface, color-on-surface, inherit), (190, $kendo-color-white, 190, inherit)),
        selected: if($kendo-enable-color-system, (color-on-surface, app-surface, color-on-surface), (190, $kendo-color-white, 190)),
        selected-hover: if($kendo-enable-color-system, (color-subtle, color-on-surface, color-on-subtle), (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))
    ),
) !default;

// The color matrix for the error, success and info Chips
$_tc-brand-matrix: (
    solid: (
        normal: if($kendo-enable-color-system, (color-subtle, color-on-subtle, color-subtle), (20, 160, 20)),
        hover: if($kendo-enable-color-system, (color-subtle-hover, color-on-subtle, color-subtle-hover), (30, 190, 30)),
        focus: if($kendo-enable-color-system, (color-subtle, color-on-subtle, color-on-subtle), (20, 160, 160)),
        focus-hover: if($kendo-enable-color-system, (color-subtle, color-on-subtle, color-on-subtle), (20, 190, 160)),
        selected: if($kendo-enable-color-system, (color-subtle-active, color-on-subtle, color-subtle-active), (40, 190, 40)),
        selected-hover: if($kendo-enable-color-system, (color-subtle-hover, color-on-subtle, color-subtle-hover), (30, 190, 30)),
        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, (color-on-surface, app-surface, color-on-surface), (190, $kendo-color-white, 190)),
        focus: if($kendo-enable-color-system, (transparent, color-on-surface, color-on-surface, inherit), (transparent, 160, 160, inherit)),
        focus-hover: if($kendo-enable-color-system, (color-on-surface, app-surface, color-on-surface, inherit), (190, $kendo-color-white, 190, inherit)),
        selected: if($kendo-enable-color-system, (color-on-surface, app-surface, color-on-surface), (190, $kendo-color-white, 190)),
        selected-hover: if($kendo-enable-color-system, (color-on-surface, app-surface, color-on-surface), (190, $kendo-color-white, 190)),
        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 )))
    )
) !default;

// The color matrix for the warning Chips
$_tc-warning-matrix: (
    solid: (
        normal: if($kendo-enable-color-system, (color-subtle, color-on-subtle, color-subtle), (20, k-get-theme-color-var( grey-160 ), 20)),
        hover: if($kendo-enable-color-system, (color-subtle-hover, color-on-subtle, color-subtle-hover), (30, k-get-theme-color-var( grey-190 ), 30)),
        focus: if($kendo-enable-color-system, (color-subtle, color-on-subtle, color-on-subtle), (20, k-get-theme-color-var( grey-160 ), 160)),
        focus-hover: if($kendo-enable-color-system, (color-subtle, color-on-subtle, color-on-subtle), (20, k-get-theme-color-var( grey-190 ), 160)),
        selected: if($kendo-enable-color-system, (color-subtle-active, color-on-subtle, color-subtle-active), (40, k-get-theme-color-var( grey-190 ), 40)),
        selected-hover: if($kendo-enable-color-system, (color-subtle-hover, color-on-subtle, color-subtle-hover), (30, k-get-theme-color-var( grey-190 ), 30)),
        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, (color-on-surface, app-surface, color-on-surface), (190, $kendo-color-white, 190)),
        focus: if($kendo-enable-color-system, (transparent, color-on-surface, color-on-surface, inherit), (transparent, 160, 160, inherit)),
        focus-hover: if($kendo-enable-color-system, (color-on-surface, app-surface, color-on-surface, inherit), (190, $kendo-color-white, 190, inherit)),
        selected: if($kendo-enable-color-system, (color-on-surface, app-surface, color-on-surface), (190, $kendo-color-white, 190)),
        selected-hover: if($kendo-enable-color-system, (color-on-surface, app-surface, color-on-surface), (190, $kendo-color-white, 190)),
        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 )))
    )
) !default;

/// The theme colors map for the Chip.
$kendo-chip-theme-colors: () !default;

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

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

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


// Chip List

/// The sizes of the Chip list.
/// @group chip
$kendo-chip-list-sizes: (
    sm: k-spacing(1),
    md: k-spacing(1),
    lg: k-spacing(1)
) !default;