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

// Chip

/// The default theme color of the Chip.
/// @group chip
/// @role default
$kendo-chip-default-theme-color: "base" !default;
/// The default fill mode of the Chip.
/// @group chip
/// @role default
$kendo-chip-default-fill-mode: "solid" !default;
/// The default roundness of the Chip.
/// @group chip
/// @role default
$kendo-chip-default-roundness: "md" !default;
/// The default size of the Chip.
/// @group chip
/// @role default
$kendo-chip-default-size: "md" !default;

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

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

/// The width of the Chip' avatar.
/// @group chip
$kendo-chip-avatar-width: var( --kendo-chip-avatar-width, 1em ) !default;
/// The height of the Chip' avatar.
/// @group chip
$kendo-chip-avatar-height: var( --kendo-chip-avatar-height, 1em ) !default;
/// The flex basis of the Chip' avatar.
/// @group chip
$kendo-chip-avatar-flex-basis: 1em !default;

/// The offset of the outline focused Chip.
/// @group chip
$kendo-chip-focus-offset: calc( #{$kendo-chip-border-width} * -1) !default;
/// The outline width of the outline focused Chip.
/// @group chip
$kendo-chip-focus-outline-width: 2px !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(1.5) !default;
/// The horizontal padding of the medium Chip.
/// @group chip
$kendo-chip-md-padding-x: var( --kendo-chip-padding-x, k-spacing(1.5) ) !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: calc( #{k-spacing(0.5)} / 2 ) !default;
/// The vertical padding of the medium Chip.
/// @group chip
$kendo-chip-md-padding-y: calc( var( --kendo-chip-padding-y, #{k-spacing(1.5)} ) / 2 ) !default;
/// The vertical padding of the large Chip.
/// @group chip
$kendo-chip-lg-padding-y: calc( #{k-spacing(2.5)} / 2 ) !default;

/// The font weight of the Chip.
/// @group chip
$kendo-chip-font-weight: var(--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-sm, inherit ) !default;
/// The font size of the medium Chip.
/// @group chip
$kendo-chip-md-font-size: var( --kendo-chip-font-size, var( --kendo-font-size-sm, 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-lg, 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-chip-line-height, var( --kendo-line-height-lg, 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;

$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;

// 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)
    )
) !default;

/// The base text color of the solid Chip.
/// @group chip
$kendo-chip-text: var( --kendo-chip-text, k-color(base-on-subtle) ) !default;
/// The base background color of the solid Chip.
/// @group chip
$kendo-chip-bg: var( --kendo-chip-bg, k-color(base-subtle) ) !default;
/// The base border color of the solid Chip.
/// @group chip
$kendo-chip-border: var( --kendo-chip-border, color-mix(in srgb, k-color(border) 26%, transparent) ) !default;
/// The base background color of the hovered solid Chip.
/// @group chip
$kendo-chip-hover-bg: var( --kendo-chip-hover-bg, k-color(base-subtle-hover) ) !default;
/// The base border color of the hovered solid Chip.
/// @group chip
$kendo-chip-hover-border: var( --kendo-chip-hover-border, color-mix( in srgb, k-color(border) 34%, transparent ) ) !default;
/// The base background color of the focused solid Chip.
/// @group chip
$kendo-chip-focus-bg: var( --kendo-chip-focused-bg, k-color(base-subtle) ) !default;
/// The base border color of the focused solid Chip.
/// @group chip
$kendo-chip-focus-border: var( --kendo-chip-focused-border, k-color(base-on-subtle) ) !default;
/// The base outline color of the focused solid Chip.
/// @group chip
$kendo-chip-focus-outline: var( --kendo-chip-focus-outline, initial) !default;
/// The base text color of the selected solid Chip.
/// @group chip
$kendo-chip-selected-text: var( --kendo-chip-selected-text, k-color(on-primary) ) !default;
/// The base background color of the selected solid Chip.
/// @group chip
$kendo-chip-selected-bg: var( --kendo-chip-selected-bg, k-color(primary) )  !default;
/// The base border color of the selected solid Chip.
/// @group chip
$kendo-chip-selected-border: var( --kendo-chip-selected-border, k-color(primary) ) !default;
/// The base text color of the disabled solid Chip.
/// @group chip
$kendo-chip-disabled-text: var( --kendo-chip-disabled-text, color-mix(in srgb, k-color(on-app-surface) 30%, transparent) ) !default;
/// The base background color of the disabled solid Chip.
/// @group chip
$kendo-chip-disabled-bg: var( --kendo-chip-disabled-bg, color-mix(in srgb, k-color(on-app-surface) 7%, transparent) )  !default;
/// The base border color of the disabled solid Chip.
/// @group chip
$kendo-chip-disabled-border: var( --kendo-chip-disabled-border, transparent ) !default;

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

@forward "@progress/kendo-theme-core/scss/components/chip/_variables.scss" with (
    $kendo-chip-default-theme-color: $kendo-chip-default-theme-color,
    $kendo-chip-default-fill-mode: $kendo-chip-default-fill-mode,
    $kendo-chip-default-roundness: $kendo-chip-default-roundness,
    $kendo-chip-default-size: $kendo-chip-default-size,
    $kendo-chip-border-width: $kendo-chip-border-width,
    $kendo-chip-spacing: $kendo-chip-spacing,
    $kendo-chip-sm-padding-x: $kendo-chip-sm-padding-x,
    $kendo-chip-md-padding-x: $kendo-chip-md-padding-x,
    $kendo-chip-lg-padding-x: $kendo-chip-lg-padding-x,
    $kendo-chip-sm-padding-y: $kendo-chip-sm-padding-y,
    $kendo-chip-md-padding-y: $kendo-chip-md-padding-y,
    $kendo-chip-lg-padding-y: $kendo-chip-lg-padding-y,
    $kendo-chip-font-weight: $kendo-chip-font-weight,
    $kendo-chip-sm-font-size: $kendo-chip-sm-font-size,
    $kendo-chip-md-font-size: $kendo-chip-md-font-size,
    $kendo-chip-lg-font-size: $kendo-chip-lg-font-size,
    $kendo-chip-sm-line-height: $kendo-chip-sm-line-height,
    $kendo-chip-md-line-height: $kendo-chip-md-line-height,
    $kendo-chip-lg-line-height: $kendo-chip-lg-line-height,
    $kendo-chip-calc-size: $kendo-chip-calc-size,
    $kendo-chip-sm-calc-size: $kendo-chip-sm-calc-size,
    $kendo-chip-base-bg: $kendo-chip-bg,
    $kendo-chip-solid-bg: $kendo-chip-bg,
    $kendo-chip-solid-text: $kendo-chip-text,
    $kendo-chip-solid-border: $kendo-chip-border,
    $kendo-chip-solid-focus-bg: $kendo-chip-focus-bg,
    $kendo-chip-solid-hover-bg: $kendo-chip-hover-bg,
    $kendo-chip-solid-selected-bg: $kendo-chip-selected-bg,
    $kendo-chip-disabled-bg: $kendo-chip-disabled-bg,
    $kendo-chip-disabled-text: $kendo-chip-disabled-text,
    $kendo-chip-disabled-border: $kendo-chip-disabled-border,
    $kendo-chip-list-size-sm: $kendo-chip-list-size-sm,
    $kendo-chip-list-size-md: $kendo-chip-list-size-md,
    $kendo-chip-list-size-lg: $kendo-chip-list-size-lg
);