@use "sass:map";
@use "../core/_index.scss" as *;
@use "../list/_variables.scss" as *;
@use "@progress/kendo-theme-core/scss/functions/index.import.scss" as *;

// Checkbox

/// The border radius of the CheckBox.
/// @group checkbox
$kendo-checkbox-border-radius: null !default;

/// The border width of the CheckBox.
/// @group checkbox
$kendo-checkbox-border-width: 1px !default;

// A map with the different CheckBox sizes.
$kendo-checkbox-sizes: (
    sm: (
        size: k-spacing(4),
        glyph-size: k-spacing(3.5),
        indicator-size: k-spacing(4),
        indeterminate-size: k-spacing(3),
        ripple-size: 300%
    ),
    md: (
        size: k-spacing(5),
        glyph-size: k-spacing(4.5),
        indicator-size: k-spacing(4),
        indeterminate-size: k-spacing(4),
        ripple-size: 300%
    ),
    lg: (
        size: k-spacing(6),
        glyph-size: k-spacing(5.5),
        indicator-size: k-spacing(4),
        indeterminate-size: k-spacing(5),
        ripple-size: 300%
    )
) !default;

/// The background color of the CheckBox.
/// @group checkbox
$kendo-checkbox-bg: $kendo-component-bg !default;
/// The text color of the CheckBox.
/// @group checkbox
$kendo-checkbox-text: transparent !default;
/// The border color of the CheckBox.
/// @group checkbox
$kendo-checkbox-border: if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 )) !default;

/// The background color of the hovered CheckBox.
/// @group checkbox
$kendo-checkbox-hover-bg: $kendo-checkbox-bg !default;
/// The text color of the hovered CheckBox.
/// @group checkbox
$kendo-checkbox-hover-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color( neutral, 130 )) !default;
/// The border color of the hovered CheckBox.
/// @group checkbox
$kendo-checkbox-hover-border: $kendo-checkbox-border !default;

/// The background color of the checked CheckBox.
/// @group checkbox
$kendo-checkbox-checked-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
/// The text color of the checked CheckBox.
/// @group checkbox
$kendo-checkbox-checked-text: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
/// The border color of the checked CheckBox.
/// @group checkbox
$kendo-checkbox-checked-border: $kendo-checkbox-checked-bg !default;

/// The background of the hovered and checked CheckBox.
/// @group checkbox
$kendo-checkbox-hover-checked-bg: if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 )) !default;
/// The text color of the hovered and checked CheckBox.
/// @group checkbox
$kendo-checkbox-hover-checked-text: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
/// The border color of the hovered and checked CheckBox.
/// @group checkbox
$kendo-checkbox-hover-checked-border: $kendo-checkbox-hover-checked-bg !default;

/// The border color of the focused CheckBox.
/// @group checkbox
$kendo-checkbox-focus-border: null !default;
/// The box shadow of the focused CheckBox.
/// @group checkbox
$kendo-checkbox-focus-shadow: null !default;
/// The outline of the focused CheckBox.
/// @group checkbox
$kendo-checkbox-focus-outline: 1px solid if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) !default;
$kendo-checkbox-focus-outline-offset: 2px !default;

/// The background color of the indeterminate CheckBox.
/// @group checkbox
$kendo-checkbox-indeterminate-bg: $kendo-checkbox-bg !default;
/// The text color of the indeterminate CheckBox.
/// @group checkbox
$kendo-checkbox-indeterminate-text: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color( primary, 100 )) !default;
/// The border color of the indeterminate CheckBox.
/// @group checkbox
$kendo-checkbox-indeterminate-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;

/// The background color of the hovered and indeterminate CheckBox.
/// @group checkbox
$kendo-checkbox-hover-indeterminate-bg: $kendo-checkbox-bg !default;
/// The text color of the hovered and indeterminate CheckBox.
/// @group checkbox
$kendo-checkbox-hover-indeterminate-text: if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color( primary, 110 )) !default;
/// The border color of the hovered and indeterminate CheckBox.
/// @group checkbox
$kendo-checkbox-hover-indeterminate-border: if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 )) !default;

/// The background color of the disabled CheckBox.
/// @group checkbox
$kendo-checkbox-disabled-bg: $kendo-checkbox-bg !default;
/// The text color of the disabled CheckBox.
/// @group checkbox
$kendo-checkbox-disabled-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) !default;
/// The border color of the disabled CheckBox.
/// @group checkbox
$kendo-checkbox-disabled-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) !default;

/// The background color of the disabled and checked CheckBox.
/// @group checkbox
$kendo-checkbox-disabled-checked-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) !default;
/// The text color of the disabled and checked CheckBox.
/// @group checkbox
$kendo-checkbox-disabled-checked-text: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
/// The border color of the disabled and checked CheckBox.
/// @group checkbox
$kendo-checkbox-disabled-checked-border: if($kendo-enable-color-system, transparent, k-get-theme-color-var( neutral-60 )) !default;

/// The background color of the disabled and indeterminate CheckBox.
/// @group checkbox
$kendo-checkbox-disabled-indeterminate-bg: $kendo-checkbox-bg !default;
/// The border color of the disabled and indeterminate CheckBox.
/// @group checkbox
$kendo-checkbox-disabled-indeterminate-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color( neutral, 60 )) !default;
/// The border color of the disabled and indeterminate CheckBox.
/// @group checkbox
$kendo-checkbox-disabled-indeterminate-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) !default;

/// The background color of an invalid CheckBox.
/// @group checkbox
$kendo-checkbox-invalid-bg: $kendo-checkbox-bg !default;
/// The text color of an invalid CheckBox.
/// @group checkbox
$kendo-checkbox-invalid-text: $kendo-invalid-text !default;
/// The border color of an invalid CheckBox.
/// @group checkbox
$kendo-checkbox-invalid-border: $kendo-invalid-border !default;


// Checkbox indicator

/// The type of the CheckBox indicator.
/// @group checkbox
$kendo-checkbox-indicator-type: image !default;

/// The font family of the CheckBox indicator glyph.
/// @group checkbox
$kendo-checkbox-glyph-font-family: "WebComponentsIcons", monospace !default;
/// The glyph of the CheckBox indicator.
/// @group checkbox
$kendo-checkbox-checked-glyph: "\e118" !default;
/// The glyph of the indeterminate CheckBox indicator.
/// @group checkbox
$kendo-checkbox-indeterminate-glyph: "\e121" !default;

/// The image of the hovered CheckBox indicator.
/// @group checkbox
$kendo-checkbox-hover-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#323130' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") ) !default;
/// The image of the checked CheckBox indicator.
/// @group checkbox
$kendo-checkbox-checked-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#ffffff' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") ) !default;
/// The image of the indeterminate CheckBox indicator.
/// @group checkbox
$kendo-checkbox-indeterminate-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='3' y='3' width='10' height='10' rx='2' fill='#0078d4'/></svg>") ) !default;
/// The image of the hovered and checked CheckBox indicator.
/// @group checkbox
$kendo-checkbox-hover-checked-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#ffffff' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") ) !default;
/// The image of the hovered and indeterminate CheckBox indicator.
/// @group checkbox
$kendo-checkbox-hover-indeterminate-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='3' y='3' width='10' height='10' rx='2' fill='#106ebe'/></svg>") ) !default;
/// The image of the checked CheckBox indicator.
/// @group checkbox
$kendo-checkbox-disabled-checked-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#ffffff' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") ) !default;
/// The image of the indeterminate CheckBox indicator.
/// @group checkbox
$kendo-checkbox-disabled-indeterminate-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='3' y='3' width='10' height='10' rx='2' fill='#323130'/></svg>") ) !default;


// Checkbox label

/// The horizontal margin of the CheckBox inside a label.
/// @group checkbox
$kendo-checkbox-label-margin-x: k-spacing(2) !default;


// Checkbox list

/// The spacing between the items in a horizontal CheckBox list.
/// @group checkbox
$kendo-checkbox-list-spacing: k-spacing(4) !default;
/// The horizontal padding of the CheckBox list items.
/// @group checkbox
$kendo-checkbox-list-item-padding-x: k-spacing(0) !default;
/// The vertical padding of the CheckBox list items.
/// @group checkbox
$kendo-checkbox-list-item-padding-y: $kendo-list-md-item-padding-y !default;


// Checkbox ripple

/// The background color of the CheckBox' ripple.
/// @group checkbox
$kendo-checkbox-ripple-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
/// The opacity of the CheckBox' ripple.
/// @group checkbox
$kendo-checkbox-ripple-opacity: .25 !default;