@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: color-mix(in srgb, k-color(on-app-surface) 46%, transparent) !default;
/// The background color of the solid disabled Chip.
/// @group chip
$kendo-chip-solid-disabled-bg: k-color(base-subtle) !default;
/// The border color of the solid disabled Chip.
/// @group chip
$kendo-chip-solid-disabled-border: transparent !default;
/// The background color of the outline disabled Chip.
/// @group chip
$kendo-chip-outline-disabled-bg: var( k-color(surface-alt), transparent ) !default;
/// The border color of the outline disabled Chip.
/// @group chip
$kendo-chip-outline-disabled-border: color-mix(in srgb, k-color(on-app-surface) 46%, transparent) !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 weight of the Chip.
/// @group chip
$kendo-chip-font-weight: var( --kendo-font-weight-normal, normal ) !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: (color-subtle, color-on-subtle, color-subtle),
        hover: (color-subtle-hover, color-on-subtle, color-subtle-hover),
        focus: (color-subtle, color-on-subtle, color-on-subtle),
        focus-hover: (color-subtle, color-on-subtle, color-on-subtle),
        selected: (k-color(primary), k-color(on-primary), k-color(primary)),
        selected-hover: (k-color(primary), k-color(on-primary), k-color(primary)),
        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: (color-on-surface, app-surface, color-on-surface),
        focus: (transparent, color-on-surface, currentColor, inherit),
        focus-hover: (color-on-surface, app-surface, color-on-surface, inherit),
        selected: (color-on-surface, app-surface, color-on-surface),
        selected-hover: (color-subtle, color-on-surface, color-on-subtle),
        disabled: (initial, color-mix(in srgb, k-color(on-app-surface) 46%, transparent), color-mix(in srgb, k-color(on-app-surface) 46%, transparent))
    ),
) !default;

// The color matrix for the error, success and info Chips
$_tc-brand-matrix: (
    solid: (
        normal: (color-subtle, color-on-subtle, color-subtle),
        hover: (color-subtle-hover, color-on-subtle, color-subtle-hover),
        focus: (color-subtle, color-on-subtle, color-on-subtle),
        focus-hover: (color-subtle, color-on-subtle, color-on-subtle),
        selected: (color-subtle-active, color-on-subtle, color-subtle-active),
        selected-hover: (color-subtle-hover, color-on-subtle, color-subtle-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)
    ),
    outline: (
        normal: (transparent, color-on-surface, currentColor),
        hover: (color-on-surface, app-surface, color-on-surface),
        focus: (transparent, color-on-surface, color-on-surface, inherit),
        focus-hover: (color-on-surface, app-surface, color-on-surface, inherit),
        selected: (color-on-surface, app-surface, color-on-surface),
        selected-hover: (color-on-surface, app-surface, color-on-surface),
        disabled: (initial, color-mix(in srgb, k-color(on-app-surface) 46%, transparent), color-mix(in srgb, k-color(on-app-surface) 46%, transparent))
    )
) !default;

// The color matrix for the warning Chips
$_tc-warning-matrix: (
    solid: (
        normal: (color-subtle, color-on-subtle, color-subtle),
        hover: (color-subtle-hover, color-on-subtle, color-subtle-hover),
        focus: (color-subtle, color-on-subtle, color-on-subtle),
        focus-hover: (color-subtle, color-on-subtle, color-on-subtle),
        selected: (color-subtle-active, color-on-subtle, color-subtle-active),
        selected-hover: (color-subtle-hover, color-on-subtle, color-subtle-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)
    ),
    outline: (
        normal: (transparent, color-on-surface, currentColor),
        hover: (color-on-surface, app-surface, color-on-surface),
        focus: (transparent, color-on-surface, color-on-surface, inherit),
        focus-hover: (color-on-surface, app-surface, color-on-surface, inherit),
        selected: (color-on-surface, app-surface, color-on-surface),
        selected-hover: (color-on-surface, app-surface, color-on-surface),
        disabled: (initial, color-mix(in srgb, k-color(on-app-surface) 46%, transparent), color-mix(in srgb, k-color(on-app-surface) 46%, transparent))
    )
) !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, base, $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;