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

// Checkbox

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

/// The size of a small CheckBox.
/// @group checkbox
$kendo-checkbox-sm-size: var( --kendo-checkbox-sm-size, k-spacing(4) ) !default;
/// The size of a medium CheckBox.
/// @group checkbox
$kendo-checkbox-md-size: var( --kendo-checkbox-md-size, k-spacing(5) ) !default;
/// The size of a large CheckBox.
/// @group checkbox
$kendo-checkbox-lg-size: var( --kendo-checkbox-lg-size, k-spacing(6) ) !default;

/// The glyph size of a small CheckBox.
/// @group checkbox
$kendo-checkbox-sm-glyph-size: var( --kendo-checkbox-sm-glyph-size, k-spacing(3.5) ) !default;
/// The glyph size of a medium CheckBox.
/// @group checkbox
$kendo-checkbox-md-glyph-size: var( --kendo-checkbox-md-glyph-size, k-spacing(4.5) ) !default;
/// The glyph size of a large CheckBox.
/// @group checkbox
$kendo-checkbox-lg-glyph-size: var( --kendo-checkbox-lg-glyph-size, k-spacing(5.5) ) !default;

/// The ripple size of a small CheckBox.
/// @group checkbox
$kendo-checkbox-sm-ripple-size: var( --kendo-checkbox-sm-ripple-size, 300% ) !default;
/// The ripple size of a medium CheckBox.
/// @group checkbox
$kendo-checkbox-md-ripple-size: var( --kendo-checkbox-md-ripple-size, 300% ) !default;
/// The ripple size of a large CheckBox.
/// @group checkbox
$kendo-checkbox-lg-ripple-size: var( --kendo-checkbox-lg-ripple-size, 300% ) !default;

// A map with the different CheckBox sizes.
/// The sizes of the CheckBox.
/// @group checkbox
$kendo-checkbox-sizes: (
    sm: (
        size: $kendo-checkbox-sm-size,
        glyph-size: $kendo-checkbox-sm-glyph-size,
        ripple-size: $kendo-checkbox-sm-ripple-size,
        indicator-size: k-spacing(4),
        indeterminate-size: k-spacing(3),
    ),
    md: (
        size: $kendo-checkbox-md-size,
        glyph-size: $kendo-checkbox-md-glyph-size,
        ripple-size: $kendo-checkbox-md-ripple-size,
        indicator-size: k-spacing(4),
        indeterminate-size: k-spacing(4),
    ),
    lg: (
        size: $kendo-checkbox-lg-size,
        glyph-size: $kendo-checkbox-lg-glyph-size,
        ripple-size: $kendo-checkbox-lg-ripple-size,
        indicator-size: k-spacing(4),
        indeterminate-size: k-spacing(5),
    )
) !default;

/// The background color of the CheckBox.
/// @group checkbox
$kendo-checkbox-bg: var( --kendo-checkbox-bg, k-color(surface-alt) ) !default;
/// The text color of the CheckBox.
/// @group checkbox
$kendo-checkbox-text: var( --kendo-checkbox-text, k-color(secondary-on-surface) ) !default;
/// The border color of the CheckBox.
/// @group checkbox
$kendo-checkbox-border: var( --kendo-checkbox-border, k-color(border) ) !default;

/// The background color of the hovered CheckBox.
/// @group checkbox
$kendo-checkbox-hover-bg: var( --kendo-checkbox-hover-bg, $kendo-checkbox-bg ) !default;
/// The text color of the hovered CheckBox.
/// @group checkbox
$kendo-checkbox-hover-text: var( --kendo-checkbox-hover-text, k-color(on-app-surface) ) !default;
/// The border color of the hovered CheckBox.
/// @group checkbox
$kendo-checkbox-hover-border: var( --kendo-checkbox-hover-border, $kendo-checkbox-border ) !default;

/// The background color of the checked CheckBox.
/// @group checkbox
$kendo-checkbox-checked-bg: var( --kendo-checkbox-checked-bg, k-color(primary) ) !default;
/// The text color of the checked CheckBox.
/// @group checkbox
$kendo-checkbox-checked-text: var( --kendo-checkbox-checked-text, k-color(surface-alt) ) !default;
/// The border color of the checked CheckBox.
/// @group checkbox
$kendo-checkbox-checked-border: var( --kendo-checkbox-checked-border, $kendo-checkbox-checked-bg ) !default;

/// The background color of the indeterminate CheckBox.
/// @group checkbox
$kendo-checkbox-indeterminate-bg: var( --kendo-checkbox-indeterminate-bg, $kendo-checkbox-bg ) !default;
/// The text color of the indeterminate CheckBox.
/// @group checkbox
$kendo-checkbox-indeterminate-text: var( --kendo-checkbox-indeterminate-text, k-color(primary) ) !default;
/// The border color of the indeterminate CheckBox.
/// @group checkbox
$kendo-checkbox-indeterminate-border: var( --kendo-checkbox-indeterminate-border, k-color(primary) ) !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 border color of the focused and checked CheckBox.
/// @group checkbox
$kendo-checkbox-focus-checked-border: null !default;
/// The box shadow of the focused and checked CheckBox.
/// @group checkbox
$kendo-checkbox-focus-checked-shadow: null !default;
/// The outline of the focused CheckBox.
/// @group checkbox
$kendo-checkbox-focus-outline: 2px solid k-color(border-alt) !default;
/// The outline offset of the focused CheckBox.
/// @group checkbox
$kendo-checkbox-focus-outline-offset: 4px !default;

/// The background color of the disabled CheckBox.
/// @group checkbox
$kendo-checkbox-disabled-bg: var( --kendo-checkbox-disabled-bg, $kendo-checkbox-bg ) !default;
/// The text color of the disabled CheckBox.
/// @group checkbox
$kendo-checkbox-disabled-text: var( --kendo-checkbox-disabled-text, color-mix(in srgb, k-color(on-app-surface) 30%, transparent) ) !default;
/// The border color of the disabled CheckBox.
/// @group checkbox
$kendo-checkbox-disabled-border: var( --kendo-checkbox-disabled-border, color-mix(in srgb, k-color(on-app-surface) 14%, transparent) ) !default;

/// The background color of the disabled and checked CheckBox.
/// @group checkbox
$kendo-checkbox-disabled-checked-bg: var( --kendo-checkbox-disabled-checked-bg, $kendo-checkbox-disabled-border ) !default;
/// The text color of the disabled and checked CheckBox.
/// @group checkbox
$kendo-checkbox-disabled-checked-text: var( --kendo-checkbox-disabled-checked-text, k-color(app-surface) ) !default;
/// The border color of the disabled and checked CheckBox.
/// @group checkbox
$kendo-checkbox-disabled-checked-border: var( --kendo-checkbox-disabled-checked-border, transparent ) !default;

/// The text color of an invalid CheckBox.
/// @group checkbox
$kendo-checkbox-invalid-text: var( --kendo-checkbox-invalid-text, k-color(error-on-surface) ) !default;
/// The border color of an invalid CheckBox.
/// @group checkbox
$kendo-checkbox-invalid-border: var( --kendo-checkbox-invalid-border, k-color(error-on-surface) ) !default;

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

/// The background color of the hovered and indeterminate CheckBox.
/// @group checkbox
$kendo-checkbox-hover-indeterminate-bg: var( --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: var( --kendo-checkbox-hover-indeterminate-text, k-color(primary-hover) ) !default;
/// The border color of the hovered and indeterminate CheckBox.
/// @group checkbox
$kendo-checkbox-hover-indeterminate-border: var( --kendo-checkbox-hover-indeterminate-border, k-color(primary-hover) ) !default;

/// The background color of the disabled and indeterminate CheckBox.
/// @group checkbox
$kendo-checkbox-disabled-indeterminate-bg: var( --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: var( --kendo-checkbox-disabled-indeterminate-text, $kendo-checkbox-disabled-text ) !default;
/// The border color of the disabled and indeterminate CheckBox.
/// @group checkbox
$kendo-checkbox-disabled-indeterminate-border: var( --kendo-checkbox-disabled-indeterminate-border, $kendo-checkbox-disabled-border ) !default;

/// The default size of the Checkbox.
/// @group checkbox
/// @role default
$kendo-checkbox-default-size: "md" !default;

/// The default border radius of the Checkbox.
/// @group checkbox
/// @role default
$kendo-checkbox-default-roundness: "md" !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: var( --kendo-checkbox-glyph-font-family, "WebComponentsIcons", monospace ) !default;
/// The glyph of the CheckBox indicator.
/// @group checkbox
$kendo-checkbox-checked-glyph: var( --kendo-checkbox-checked-glyph, "\e118" ) !default;
/// The glyph of the indeterminate CheckBox indicator.
/// @group checkbox
$kendo-checkbox-indeterminate-glyph: var( --kendo-checkbox-indeterminate-glyph, "\e121" ) !default;

/// The image of the checked CheckBox indicator.
/// @group checkbox
$kendo-checkbox-checked-image: var( --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: var( --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 CheckBox indicator.
/// @group checkbox
$kendo-checkbox-hover-image: var( --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 hovered and indeterminate CheckBox indicator.
/// @group checkbox
$kendo-checkbox-hover-indeterminate-image: var( --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: var( --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: var( --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: var( --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: var( --kendo-checkbox-list-spacing, k-spacing(4) ) !default;
/// The horizontal padding of the CheckBox list items.
/// @group checkbox
$kendo-checkbox-list-item-padding-x: var( --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: var( --kendo-checkbox-list-item-padding-y, k-spacing(2) )!default;


// Checkbox ripple

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

@forward "@progress/kendo-theme-core/scss/components/checkbox/_variables.scss" with (
    $kendo-checkbox-border-width: $kendo-checkbox-border-width,
    $kendo-checkbox-sm-size: $kendo-checkbox-sm-size,
    $kendo-checkbox-md-size: $kendo-checkbox-md-size,
    $kendo-checkbox-lg-size: $kendo-checkbox-lg-size,
    $kendo-checkbox-sm-glyph-size: $kendo-checkbox-sm-glyph-size,
    $kendo-checkbox-md-glyph-size: $kendo-checkbox-md-glyph-size,
    $kendo-checkbox-lg-glyph-size: $kendo-checkbox-lg-glyph-size,
    $kendo-checkbox-sm-ripple-size: $kendo-checkbox-sm-ripple-size,
    $kendo-checkbox-md-ripple-size: $kendo-checkbox-md-ripple-size,
    $kendo-checkbox-lg-ripple-size: $kendo-checkbox-lg-ripple-size,
    $kendo-checkbox-sizes: $kendo-checkbox-sizes,
    $kendo-checkbox-bg: $kendo-checkbox-bg,
    $kendo-checkbox-text: $kendo-checkbox-text,
    $kendo-checkbox-border: $kendo-checkbox-border,
    $kendo-checkbox-hover-bg: $kendo-checkbox-hover-bg,
    $kendo-checkbox-hover-text: $kendo-checkbox-hover-text,
    $kendo-checkbox-hover-border: $kendo-checkbox-hover-border,
    $kendo-checkbox-checked-bg: $kendo-checkbox-checked-bg,
    $kendo-checkbox-checked-text: $kendo-checkbox-checked-text,
    $kendo-checkbox-checked-border: $kendo-checkbox-checked-border,
    $kendo-checkbox-indeterminate-bg: $kendo-checkbox-indeterminate-bg,
    $kendo-checkbox-indeterminate-text: $kendo-checkbox-indeterminate-text,
    $kendo-checkbox-indeterminate-border: $kendo-checkbox-indeterminate-border,
    $kendo-checkbox-focus-border: $kendo-checkbox-focus-border,
    $kendo-checkbox-focus-shadow: $kendo-checkbox-focus-shadow,
    $kendo-checkbox-focus-checked-border: $kendo-checkbox-focus-checked-border,
    $kendo-checkbox-focus-checked-shadow: $kendo-checkbox-focus-checked-shadow,
    $kendo-checkbox-disabled-bg: $kendo-checkbox-disabled-bg,
    $kendo-checkbox-disabled-text: $kendo-checkbox-disabled-text,
    $kendo-checkbox-disabled-border: $kendo-checkbox-disabled-border,
    $kendo-checkbox-disabled-checked-bg: $kendo-checkbox-disabled-checked-bg,
    $kendo-checkbox-disabled-checked-text: $kendo-checkbox-disabled-checked-text,
    $kendo-checkbox-disabled-checked-border: $kendo-checkbox-disabled-checked-border,
    $kendo-checkbox-invalid-text: $kendo-checkbox-invalid-text,
    $kendo-checkbox-invalid-border: $kendo-checkbox-invalid-border,
    $kendo-checkbox-indicator-type: $kendo-checkbox-indicator-type,
    $kendo-checkbox-glyph-font-family: $kendo-checkbox-glyph-font-family,
    $kendo-checkbox-checked-glyph: $kendo-checkbox-checked-glyph,
    $kendo-checkbox-indeterminate-glyph: $kendo-checkbox-indeterminate-glyph,
    $kendo-checkbox-checked-image: $kendo-checkbox-checked-image,
    $kendo-checkbox-indeterminate-image: $kendo-checkbox-indeterminate-image,
    $kendo-checkbox-label-margin-x: $kendo-checkbox-label-margin-x,
    $kendo-checkbox-list-spacing: $kendo-checkbox-list-spacing,
    $kendo-checkbox-list-item-padding-x: $kendo-checkbox-list-item-padding-x,
    $kendo-checkbox-list-item-padding-y: $kendo-checkbox-list-item-padding-y,
    $kendo-checkbox-ripple-bg: $kendo-checkbox-ripple-bg,
    $kendo-checkbox-ripple-opacity: $kendo-checkbox-ripple-opacity,
    $kendo-checkbox-default-size: $kendo-checkbox-default-size,
    $kendo-checkbox-default-roundness: $kendo-checkbox-default-roundness
);