@use "sass:map";
@use "../core/_index.scss" as *;
@use "../button/_variables.scss" as *;
@use "../core/functions/index.import.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 horizontal padding of the Chip.
/// @group chip
$kendo-chip-padding-x: k-spacing(1) !default;
/// The horizontal padding of the small Chip.
/// @group chip
$kendo-chip-sm-padding-x: k-spacing(1) !default;
/// The horizontal padding of the medium Chip.
/// @group chip
$kendo-chip-md-padding-x: k-spacing(1) !default;
/// The horizontal padding of the large Chip.
/// @group chip
$kendo-chip-lg-padding-x: k-spacing(1) !default;

/// The vertical padding of the Chip.
/// @group chip
$kendo-chip-padding-y: k-spacing(1) !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 Chip.
/// @group chip
$kendo-chip-font-size: var( --kendo-font-size, inherit ) !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-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 Chip's line height that is related to the $kendo-font-size.
/// @group chip
$kendo-chip-line-height: 1.25 !default;
/// The small Chip's line height that is related to the $kendo-font-size.
/// @group chip
$kendo-chip-sm-line-height: $kendo-chip-line-height !default;
/// The medium Chip's line height that is related to the $kendo-font-size.
/// @group chip
$kendo-chip-md-line-height: $kendo-chip-line-height !default;
/// The large Chip's line height that is related to the $kendo-font-size.
/// @group chip
$kendo-chip-lg-line-height: $kendo-chip-line-height !default;

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

/// The base background color of the Chip.
/// @group chip
$kendo-chip-base-bg: $kendo-button-bg !default;

/// The theme colors map for the Chip.
/// @group chip
$kendo-chip-theme-colors: (
    "base": $kendo-chip-base-bg,
    "error": map.get( $kendo-theme-colors, "error" ),
    "info": map.get( $kendo-theme-colors, "info" ),
    "warning": map.get( $kendo-theme-colors, "warning" ),
    "success": map.get( $kendo-theme-colors, "success" )
) !default;

/// The base background color of the solid Chip.
/// @group chip
$kendo-chip-solid-bg: $kendo-chip-base-bg !default;
/// he base text color of the solid Chip.
/// @group chip
$kendo-chip-solid-text: $kendo-button-text !default;
/// The base border color of the solid Chip.
/// @group chip
$kendo-chip-solid-border: $kendo-button-border !default;
/// The base shadow of the solid Chip.
/// @group chip
$kendo-chip-solid-shadow: 0 0 0 2px rgba( $kendo-chip-base-bg, .16 ) !default;
/// The base gradient of the solid Chip.
/// @group chip
$kendo-chip-solid-gradient: $kendo-button-gradient !default;

/// The base background color of the focused solid Chip.
/// @group chip
$kendo-chip-solid-focus-bg: null !default;
/// The base text color of the focused solid Chip.
/// @group chip
$kendo-chip-solid-focus-text: null !default;

/// The base background color of the hovered solid Chip.
/// @group chip
$kendo-chip-solid-hover-bg: $kendo-button-hover-bg !default;
/// The base text color of the hovered solid Chip.
/// @group chip
$kendo-chip-solid-hover-text: null !default;

/// The base background color of the selected solid Chip.
/// @group chip
$kendo-chip-solid-selected-bg: $kendo-button-active-bg !default;
/// The base text color of the selected solid Chip.
/// @group chip
$kendo-chip-solid-selected-text: null !default;

/// The base background color of the outline Chip.
/// @group chip
$kendo-chip-outline-bg: $kendo-component-bg !default;
/// The base text color of the outline Chip.
/// @group chip
$kendo-chip-outline-text: if($kendo-enable-color-system, k-color( base-on-surface ), $kendo-chip-solid-text) !default;
/// The base border color of the outline Chip.
/// @group chip
$kendo-chip-outline-border: $kendo-chip-outline-text !default;
/// The base shadow of the outline Chip.
/// @group chip
$kendo-chip-outline-shadow: 0 0 0 2px rgba( $kendo-chip-base-bg, .16 ) !default;

/// The base background color of the hovered outline Chip.
/// @group chip
$kendo-chip-outline-hover-bg: $kendo-chip-outline-text !default;
/// The base text color of the hovered outline Chip.
/// @group chip
$kendo-chip-outline-hover-text: if($kendo-enable-color-system, k-color( base-subtle ), k-contrast-legacy( $kendo-chip-outline-hover-bg )) !default;

/// The base background color of the selected outline Chip.
/// @group chip
$kendo-chip-outline-selected-bg: $kendo-chip-outline-hover-bg !default;
/// The base text color of the selected outline Chip.
/// @group chip
$kendo-chip-outline-selected-text: $kendo-chip-outline-hover-text !default;

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


@forward "@progress/kendo-theme-core/scss/components/chip/_variables.scss" with (
    $kendo-chip-border-width: $kendo-chip-border-width,
    $kendo-chip-spacing: $kendo-chip-spacing,
    $kendo-chip-padding-x: $kendo-chip-padding-x,
    $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-padding-y: $kendo-chip-padding-y,
    $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-size: $kendo-chip-font-size,
    $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-line-height: $kendo-chip-line-height,
    $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-sizes: $kendo-chip-sizes,
    $kendo-chip-base-bg: $kendo-chip-base-bg,
    $kendo-chip-theme-colors: $kendo-chip-theme-colors,
    $kendo-chip-solid-bg: $kendo-chip-solid-bg,
    $kendo-chip-solid-text: $kendo-chip-solid-text,
    $kendo-chip-solid-border: $kendo-chip-solid-border,
    $kendo-chip-solid-shadow: $kendo-chip-solid-shadow,
    $kendo-chip-solid-gradient: $kendo-chip-solid-gradient,
    $kendo-chip-solid-focus-bg: $kendo-chip-solid-focus-bg,
    $kendo-chip-solid-focus-text: $kendo-chip-solid-focus-text,
    $kendo-chip-solid-hover-bg: $kendo-chip-solid-hover-bg,
    $kendo-chip-solid-hover-text: $kendo-chip-solid-hover-text,
    $kendo-chip-solid-selected-bg: $kendo-chip-solid-selected-bg,
    $kendo-chip-solid-selected-text: $kendo-chip-solid-selected-text,
    $kendo-chip-outline-bg: $kendo-chip-outline-bg,
    $kendo-chip-outline-text: $kendo-chip-outline-text,
    $kendo-chip-outline-border: $kendo-chip-outline-border,
    $kendo-chip-outline-shadow: $kendo-chip-outline-shadow,
    $kendo-chip-outline-hover-bg: $kendo-chip-outline-hover-bg,
    $kendo-chip-outline-hover-text: $kendo-chip-outline-hover-text,
    $kendo-chip-outline-selected-bg: $kendo-chip-outline-selected-bg,
    $kendo-chip-outline-selected-text: $kendo-chip-outline-selected-text,
    $kendo-chip-list-sizes: $kendo-chip-list-sizes
);