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

/// The width of the Input components.
/// @group input
$kendo-input-width: 100% !default;

/// The width of the border around the Input components.
/// @group input
$kendo-input-border-width: 1px !default;

// The width of the border around the focused Input components.
$kendo-input-focus-border-width: 2px !default;

/// The height of the border around the Input components.
/// @group input
$kendo-input-border-height: ( $kendo-input-border-width * 2 ) !default;

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

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

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

/// The line height of the small Input components.
/// @group input
$kendo-input-sm-line-height: var( --kendo-line-height, normal ) !default;
/// The line height of the medium Input components.
/// @group input
$kendo-input-md-line-height: var( --kendo-line-height, normal ) !default;
/// The line height of the large Input components.
/// @group input
$kendo-input-lg-line-height: var( --kendo-line-height, normal ) !default;

// The font family of the Input components.
$kendo-input-font-family: var( --kendo-font-family, inherit) !default;

// The font weight of the Input components.
$kendo-input-font-weight: var( --kendo-font-weight, normal ) !default;

/// The width of the small Input button.
/// @group input
$kendo-input-sm-button-width: calc( #{$kendo-button-sm-line-height} * 1em + #{$kendo-button-sm-padding-y} * 2 ) !default;
/// The width of the medium Input button.
/// @group input
$kendo-input-md-button-width: calc( #{$kendo-button-md-line-height} * 1em + #{$kendo-button-md-padding-y} * 2 ) !default;
/// The width of the large Input button.
/// @group input
$kendo-input-lg-button-width: calc( #{$kendo-button-lg-line-height} * 1em + #{$kendo-button-lg-padding-y} * 2 ) !default;
/// The border width of the Input button.
/// @group input
$kendo-input-button-border-width: 1px !default;

/// The width of the small Input spinner button.
/// @group input
$kendo-input-sm-spinner-width: $kendo-input-sm-button-width !default;
/// The width of the medium Input spinner button.
/// @group input
$kendo-input-md-spinner-width: $kendo-input-md-button-width !default;
/// The width of the large Input spinner button.
/// @group input
$kendo-input-lg-spinner-width: $kendo-input-lg-button-width !default;
/// The icon offset of the Input spinner button.
/// @group input
$kendo-input-spinner-icon-offset: null !default;

/// The text color of the solid Input components.
/// @group input
$kendo-input-solid-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;

/// The background color of the solid Input components.
/// @group input
$kendo-input-solid-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;

/// The border color of the solid Input components.
/// @group input
$kendo-input-solid-border: if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 )) !default;

/// The text color of the hovered solid Input components.
/// @group input
$kendo-input-solid-hover-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) !default;

/// The background color of the hovered solid Input components.
/// @group input
$kendo-input-solid-hover-bg: $kendo-input-solid-bg !default;

/// The border color of the hovered solid Input components.
/// @group input
$kendo-input-solid-hover-border: if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 )) !default;

/// The text color of the focused solid Input components.
/// @group input
$kendo-input-solid-focus-text: $kendo-input-solid-text !default;

/// The background color of the focused solid Input components.
/// @group input
$kendo-input-solid-focus-bg: $kendo-input-solid-bg !default;

/// The border color of the focused solid Input components.
/// @group input
$kendo-input-solid-focus-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;

/// The text color of the hovered and focused solid Input components.
/// @group input
$kendo-input-solid-hover-focus-text: $kendo-input-solid-focus-text !default;

/// The background color of the hovered and focused solid Input components.
/// @group input
$kendo-input-solid-hover-focus-bg: $kendo-input-solid-focus-bg !default;

/// The border color of the hovered and focused solid Input components.
/// @group input
$kendo-input-solid-hover-focus-border: $kendo-input-solid-focus-border !default;

/// The text color of the disabled solid Input components.
/// @group input
$kendo-input-solid-disabled-text: $kendo-disabled-text !default;

/// The background color of the disabled solid Input components.
/// @group input
$kendo-input-solid-disabled-bg: $kendo-disabled-bg !default;

/// The border color of the disabled solid Input components.
/// @group input
$kendo-input-solid-disabled-border: $kendo-disabled-border !default;

/// The text color of the outline Input components.
/// @group input
$kendo-input-outline-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;

/// The background color of the outline Input components.
/// @group input
$kendo-input-outline-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;

/// The border color of the outline Input components.
/// @group input
$kendo-input-outline-border: if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 )) !default;

/// The text color of the hovered outline Input components.
/// @group input
$kendo-input-outline-hover-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) !default;

/// The background color of the hovered outline Input components.
/// @group input
$kendo-input-outline-hover-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;

/// The border color of the hovered outline Input components.
/// @group input
$kendo-input-outline-hover-border: if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 )) !default;

/// The text color of the focused outline Input components.
/// @group input
$kendo-input-outline-focus-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;

/// The background color of the focused outline Input components.
/// @group input
$kendo-input-outline-focus-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;

/// The border color of the focused outline Input components.
/// @group input
$kendo-input-outline-focus-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;

/// The text color of the hovered and focused outline Input components.
/// @group input
$kendo-input-outline-hover-focus-text: $kendo-input-outline-focus-text !default;

/// The background color of the hovered and focused outline Input components.
/// @group input
$kendo-input-outline-hover-focus-bg: $kendo-input-outline-focus-bg !default;

/// The border color of the hovered and focused outline Input components.
/// @group input
$kendo-input-outline-hover-focus-border: $kendo-input-outline-focus-border !default;

/// The text color of the disabled outline Input components.
/// @group input
$kendo-input-outline-disabled-text: $kendo-disabled-text !default;

/// The background color of the disabled outline Input components.
/// @group input
$kendo-input-outline-disabled-bg: none !default;

/// The border color of the disabled outline Input components.
/// @group input
$kendo-input-outline-disabled-border: $kendo-disabled-text !default;

/// The text color of the flat Input components.
/// @group input
$kendo-input-flat-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;

/// The background color of the flat Input components.
/// @group input
$kendo-input-flat-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;

/// The border color of the flat Input components.
/// @group input
$kendo-input-flat-border: if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 )) !default;

/// The text color of the hovered flat Input components.
/// @group input
$kendo-input-flat-hover-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) !default;

/// The background color of the hovered flat Input components.
/// @group input
$kendo-input-flat-hover-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;

/// The border color of the hovered flat Input components.
/// @group input
$kendo-input-flat-hover-border: if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 )) !default;

/// The text color of the focused flat Input components.
/// @group input
$kendo-input-flat-focus-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;

/// The background color of the focused flat Input components.
/// @group input
$kendo-input-flat-focus-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;

/// The border color of the focused flat Input components.
/// @group input
$kendo-input-flat-focus-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;

/// The text color of the hovered and focused flat Input components.
/// @group input
$kendo-input-flat-hover-focus-text: $kendo-input-flat-focus-text !default;

/// The background color of the hovered and focused flat Input components.
/// @group input
$kendo-input-flat-hover-focus-bg: $kendo-input-flat-focus-bg !default;

/// The border color of the hovered and focused flat Input components.
/// @group input
$kendo-input-flat-hover-focus-border: $kendo-input-flat-focus-border !default;

/// The text color of the disabled flat Input components.
/// @group input
$kendo-input-flat-disabled-text: $kendo-disabled-text !default;

/// The background color of the disabled flat Input components.
/// @group input
$kendo-input-flat-disabled-bg: none !default;

/// The border color of the disabled flat Input components.
/// @group input
$kendo-input-flat-disabled-border: $kendo-disabled-text !default;

/// The text color of the solid Picker components.
/// @group input
$kendo-picker-solid-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;

/// The background color of the solid Picker components.
/// @group input
$kendo-picker-solid-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;

/// The border color of the solid Picker components.
/// @group input
$kendo-picker-solid-border: if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 ))!default;

/// The text color of the hovered solid Picker components.
/// @group input
$kendo-picker-solid-hover-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) !default;

/// The background color of hovered the solid Picker components.
/// @group input
$kendo-picker-solid-hover-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;

/// The border color of the hovered solid Picker components.
/// @group input
$kendo-picker-solid-hover-border: if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 )) !default;

/// The text color of the focused solid Picker components.
/// @group input
$kendo-picker-solid-focus-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;

/// The background color of the focused solid Picker components.
/// @group input
$kendo-picker-solid-focus-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;

/// The border color of the focused solid Picker components.
/// @group input
$kendo-picker-solid-focus-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;

/// The text color of the hovered and focused solid Picker components.
/// @group input
$kendo-picker-solid-hover-focus-text: $kendo-picker-solid-focus-text !default;

/// The background color of the hovered and focused solid Picker components.
/// @group input
$kendo-picker-solid-hover-focus-bg: $kendo-picker-solid-focus-bg !default;

/// The border color of the hovered and focused solid Picker components.
/// @group input
$kendo-picker-solid-hover-focus-border: $kendo-picker-solid-focus-border !default;

/// The text color of the disabled solid Picker components.
/// @group input
$kendo-picker-solid-disabled-text: $kendo-disabled-text !default;

/// The background color of the disabled solid Picker components.
/// @group input
$kendo-picker-solid-disabled-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 9%, transparent), k-get-theme-color-var( neutral-30 )) !default;

/// The border color of the disabled solid Picker components.
/// @group input
$kendo-picker-solid-disabled-border: $kendo-disabled-border !default;

/// The text color of the outline Picker components.
/// @group input
$kendo-picker-outline-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;

/// The background color of the outline Picker components.
/// @group input
$kendo-picker-outline-bg: none !default;

/// The border color of the outline Picker components.
/// @group input
$kendo-picker-outline-border: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;

/// The text color of the hovered outline Picker components.
/// @group input
$kendo-picker-outline-hover-text: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;

/// The background color of the hovered outline Picker components.
/// @group input
$kendo-picker-outline-hover-bg: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) !default;

/// The border color of the hovered outline Picker components.
/// @group input
$kendo-picker-outline-hover-border: $kendo-picker-outline-hover-bg!default;

/// The text color of the focused outline Picker components.
/// @group input
$kendo-picker-outline-focus-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;

/// The background color of the focused outline Picker components.
/// @group input
$kendo-picker-outline-focus-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;

/// The border color of the focused outline Picker components.
/// @group input
$kendo-picker-outline-focus-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;

/// The text color of the hovered and focused outline Picker components.
/// @group input
$kendo-picker-outline-hover-focus-text: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;

/// The background color of the hovered and focused outline Picker components.
/// @group input
$kendo-picker-outline-hover-focus-bg: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) !default;

/// The border color of the hovered and focused outline Picker components.
/// @group input
$kendo-picker-outline-hover-focus-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;

/// The text color of the disabled outline Picker components.
/// @group input
$kendo-picker-outline-disabled-text: $kendo-disabled-text !default;

/// The background color of the disabled outline Picker components.
/// @group input
$kendo-picker-outline-disabled-bg: none !default;

/// The border color of the disabled outline Picker components.
/// @group input
$kendo-picker-outline-disabled-border: $kendo-picker-outline-disabled-text!default;

/// The text color of the flat Picker components.
/// @group input
$kendo-picker-flat-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;

/// The background color of the flat Picker components.
/// @group input
$kendo-picker-flat-bg: none !default;

/// The border color of the flat Picker components.
/// @group input
$kendo-picker-flat-border: if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 )) !default;

/// The text color of the hovered flat Picker components.
/// @group input
$kendo-picker-flat-hover-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) !default;

/// The background color of the hovered flat Picker components.
/// @group input
$kendo-picker-flat-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-get-theme-color-var( neutral-20 )) !default;

/// The border color of the hovered flat Picker components.
/// @group input
$kendo-picker-flat-hover-border: if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 )) !default;

/// The text color of the focused flat Picker components.
/// @group input
$kendo-picker-flat-focus-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;

/// The background color of the focused flat Picker components.
/// @group input
$kendo-picker-flat-focus-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;

/// The border color of the focused flat Picker components.
/// @group input
$kendo-picker-flat-focus-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;

/// The text color of the hovered and focused flat Picker components.
/// @group input
$kendo-picker-flat-hover-focus-text: $kendo-picker-flat-hover-text !default;

/// The background color of the hovered and focused flat Picker components.
/// @group input
$kendo-picker-flat-hover-focus-bg: $kendo-picker-flat-hover-bg !default;

/// The border color of the hovered and focused flat Picker components.
/// @group input
$kendo-picker-flat-hover-focus-border: $kendo-picker-flat-border !default;

/// The text color of the disabled flat Picker components.
/// @group input
$kendo-picker-flat-disabled-text: $kendo-disabled-text !default;

/// The background color of the disabled flat Picker components.
/// @group input
$kendo-picker-flat-disabled-bg: none !default;

/// The border color of the disabled flat Picker components.
/// @group input
$kendo-picker-flat-disabled-border: $kendo-picker-flat-disabled-text !default;

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

/// The sizes map for the Input components.
/// @group input
$kendo-input-sizes: (
    sm: (
        padding-x: $kendo-input-sm-padding-x,
        padding-y: $kendo-input-sm-padding-y,
        font-size: $kendo-input-sm-font-size,
        line-height: $kendo-input-sm-line-height,
        icon-size: calc( var( --kendo-icon-size, 1rem ) + calc( #{$kendo-input-md-padding-y} * 2 ) ),
        button-padding-x: $kendo-input-sm-padding-y,
        button-padding-y: $kendo-input-sm-padding-y,
        button-width: $kendo-input-sm-button-width
    ),
    md: (
        padding-x: $kendo-input-md-padding-x,
        padding-y: $kendo-input-md-padding-y,
        font-size: $kendo-input-md-font-size,
        line-height: $kendo-input-md-line-height,
        icon-size: calc( var( --kendo-icon-size, 1rem ) + calc( #{$kendo-input-sm-padding-y} * 2 ) ),
        button-padding-x: $kendo-input-md-padding-y,
        button-padding-y: $kendo-input-md-padding-y,
        button-width: $kendo-input-md-button-width
    ),
    lg: (
        padding-x: $kendo-input-lg-padding-x,
        padding-y: $kendo-input-lg-padding-y,
        font-size: $kendo-input-lg-font-size,
        line-height: $kendo-input-lg-line-height,
        icon-size: calc( var( --kendo-icon-size, 1rem ) + calc( #{$kendo-input-lg-padding-y} * 2 ) ),
        button-padding-x: $kendo-input-lg-padding-y,
        button-padding-y: $kendo-input-lg-padding-y,
        button-width: $kendo-input-lg-button-width
    )
) !default;

/// Colors map of the input.
/// @group input
$kendo-input-theme-colors: (
    input: (
        solid: (
            text: $kendo-input-solid-text,
            bg: $kendo-input-solid-bg,
            border: $kendo-input-solid-border,
            hover-text: $kendo-input-solid-hover-text,
            hover-bg: $kendo-input-solid-hover-bg,
            hover-border: $kendo-input-solid-hover-border,
            focus-text: $kendo-input-solid-focus-text,
            focus-bg: $kendo-input-solid-focus-bg,
            focus-border: $kendo-input-solid-focus-border,
            hover-focus-text: $kendo-input-solid-hover-focus-text,
            hover-focus-bg: $kendo-input-solid-hover-focus-bg,
            hover-focus-border: $kendo-input-solid-hover-focus-border,
            disabled-text: $kendo-input-solid-disabled-text,
            disabled-bg: $kendo-input-solid-disabled-bg,
            disabled-border: $kendo-input-solid-disabled-border
        ),
        outline: (
            text: $kendo-input-outline-text,
            bg: $kendo-input-outline-bg,
            border: $kendo-input-outline-border,
            hover-text: $kendo-input-outline-hover-text,
            hover-bg: $kendo-input-outline-hover-bg,
            hover-border: $kendo-input-outline-hover-border,
            focus-text: $kendo-input-outline-focus-text,
            focus-bg: $kendo-input-outline-focus-bg,
            focus-border: $kendo-input-outline-focus-border,
            hover-focus-text: $kendo-input-outline-hover-focus-text,
            hover-focus-bg: $kendo-input-outline-hover-focus-bg,
            hover-focus-border: $kendo-input-outline-hover-focus-border,
            disabled-text: $kendo-input-outline-disabled-text,
            disabled-bg: $kendo-input-outline-disabled-bg,
            disabled-border: $kendo-input-outline-disabled-border
        ),
        flat: (
            text: $kendo-input-flat-text,
            bg: $kendo-input-flat-bg,
            border: $kendo-input-flat-border,
            hover-text: $kendo-input-flat-hover-text,
            hover-bg: $kendo-input-flat-hover-bg,
            hover-border: $kendo-input-flat-hover-border,
            focus-text: $kendo-input-flat-focus-text,
            focus-bg: $kendo-input-flat-focus-bg,
            focus-border: $kendo-input-flat-focus-border,
            hover-focus-tex: $kendo-input-flat-hover-focus-text,
            hover-focus-bg: $kendo-input-flat-hover-focus-bg,
            hover-focus-border: $kendo-input-flat-hover-focus-border,
            disabled-text: $kendo-input-flat-disabled-text,
            disabled-bg: $kendo-input-flat-disabled-bg,
            disabled-border: $kendo-input-flat-disabled-border
        )
    ),
    picker: (
        solid: (
            text: $kendo-picker-solid-text,
            bg: $kendo-picker-solid-bg,
            border: $kendo-picker-solid-border,
            hover-text: $kendo-picker-solid-hover-text,
            hover-bg: $kendo-picker-solid-hover-bg,
            hover-border: $kendo-picker-solid-hover-border,
            focus-text: $kendo-picker-solid-focus-text,
            focus-bg: $kendo-picker-solid-focus-bg,
            focus-border: $kendo-picker-solid-focus-border,
            hover-focus-tex: $kendo-picker-solid-hover-focus-text,
            hover-focus-bg: $kendo-picker-solid-hover-focus-bg,
            hover-focus-border: $kendo-picker-solid-hover-focus-border,
            disabled-text: $kendo-picker-solid-disabled-text,
            disabled-bg: $kendo-picker-solid-disabled-bg,
            disabled-border: $kendo-picker-solid-disabled-border
        ),
        outline: (
            text: $kendo-picker-outline-text,
            bg: $kendo-picker-outline-bg,
            border: $kendo-picker-outline-border,
            hover-text: $kendo-picker-outline-hover-text,
            hover-bg: $kendo-picker-outline-hover-bg,
            hover-border: $kendo-picker-outline-hover-border,
            focus-text: $kendo-picker-outline-focus-text,
            focus-bg: $kendo-picker-outline-focus-bg,
            focus-border: $kendo-picker-outline-focus-border,
            hover-focus-text: $kendo-picker-outline-hover-focus-text,
            hover-focus-bg: $kendo-picker-outline-hover-focus-bg,
            hover-focus-border: $kendo-picker-outline-hover-focus-border,
            disabled-text: $kendo-picker-outline-disabled-text,
            disabled-bg: $kendo-picker-outline-disabled-bg,
            disabled-border: $kendo-picker-outline-disabled-border
        ),
        flat: (
            text: $kendo-picker-flat-text,
            bg: $kendo-picker-flat-bg,
            border: $kendo-picker-flat-border,
            hover-text: $kendo-picker-flat-hover-text,
            hover-bg: $kendo-picker-flat-hover-bg,
            hover-border: $kendo-picker-flat-hover-border,
            focus-text: $kendo-picker-flat-focus-text,
            focus-bg: $kendo-picker-flat-focus-bg,
            focus-border: $kendo-picker-flat-focus-border,
            hover-focus-tex: $kendo-picker-flat-hover-focus-text,
            hover-focus-bg: $kendo-picker-flat-hover-focus-bg,
            hover-focus-border: $kendo-picker-flat-hover-focus-border,
            disabled-text: $kendo-picker-flat-disabled-text,
            disabled-bg: $kendo-picker-flat-disabled-bg,
            disabled-border: $kendo-picker-flat-disabled-border
        )
    )
) !default;

/// The background color of the Input prefix.
/// @group input
$kendo-input-prefix-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-20 )) !default;

/// The background color of the Input suffix.
/// @group input
$kendo-input-suffix-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-20 )) !default;

/// The color of the Input separator.
/// @group input
$kendo-input-separator-text: k-get-theme-color-var( neutral-30 ) !default;

/// The text color of the Input prefix.
/// @group input
$kendo-input-prefix-text: k-get-theme-color-var( neutral-130 ) !default;
/// The text color of the Input suffix.
/// @group input
$kendo-input-suffix-text: k-get-theme-color-var( neutral-130 ) !default;

/// The text color of the disabled Input prefix.
/// @group input
$kendo-input-prefix-disabled-text: k-get-theme-color-var( neutral-60 ) !default;
/// The text color of the disabled Input suffix.
/// @group input
$kendo-input-suffix-disabled-text: k-get-theme-color-var( neutral-60 ) !default;

/// The border color of the invalid Input components.
/// @group input
$kendo-input-invalid-border: var( --kendo-invalid-border, #{$kendo-invalid-border} ) !default;
/// The text color of the invalid Input components.
/// @group input
$kendo-input-invalid-text: var( --kendo-invalid-text, #{$kendo-invalid-text} ) !default;

// REMOVE
$kendo-valid-bg: initial !default;
$kendo-valid-text: k-get-theme-color-var( success-190 ) !default;
$kendo-valid-border: k-get-theme-color-var( success-190 ) !default;
$kendo-valid-shadow: null !default;

/// The text color of the Input placeholder.
/// @group input
$kendo-input-placeholder-text: if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) !default;
/// The opacity of the Input placeholder.
/// @group input
$kendo-input-placeholder-opacity: 1 !default;

/// The color of the Input clear value icon.
/// @group input
$kendo-input-clear-value-text: if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) !default;
/// The opacity of the Input clear value icon.
/// @group input
$kendo-input-clear-value-opacity: .6 !default;
/// The color of the hovered Input clear value icon.
/// @group input
$kendo-input-clear-value-hover-text: inherit !default;
/// The opacity of the hovered Input clear value icon.
/// @group input
$kendo-input-clear-value-hover-opacity: 1 !default;

$kendo-use-input-button-width: true !default;
$kendo-use-input-spinner-width: true !default;
$kendo-use-input-spinner-icon-offset: false !default;