@use "../core/_index.scss" as *;

// Switch

/// The default size of the Switch.
/// @group switch
/// @role default
$kendo-switch-default-size: "md" !default;
/// The default border radius of the Switch track.
/// @group switch
/// @role default
$kendo-switch-default-track-roundness: "full" !default;
/// The default border radius of the Switch thumb.
/// @group switch
/// @role default
$kendo-switch-default-thumb-roundness: "full" !default;

/// The font family of the Switch.
/// @group switch
$kendo-switch-font-family: var( --kendo-switch-font-family, var( --kendo-font-family, normal ) ) !default;

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

/// The border width of the Switch thumb.
/// @group switch
$kendo-switch-thumb-border-width: var( --kendo-switch-thumb-border-width, 0 ) !default;

/// The text transform of the Switch label.
/// @group switch
$kendo-switch-label-text-transform: var( --kendo-switch-label-text-transform, uppercase ) !default;

/// The display of the Switch label.
/// @group switch
$kendo-switch-label-display: var( --kendo-switch-label-display, none ) !default;

/// The font size of the small Switch.
/// @group switch
$kendo-switch-sm-font-size: 10px !default;
/// The track width of the small Switch.
/// @group switch
$kendo-switch-sm-track-width: 36px !default;
/// The track height of the small Switch.
/// @group switch
$kendo-switch-sm-track-height: 16px !default;
/// The thumb width of the small Switch.
/// @group switch
$kendo-switch-sm-thumb-width: 10px !default;
/// The thumb height of the small Switch.
/// @group switch
$kendo-switch-sm-thumb-height: 10px !default;
/// The thumb offset of the small Switch.
/// @group switch
$kendo-switch-sm-thumb-offset: 3px !default;
/// The label offset of the small Switch.
/// @group switch
$kendo-switch-sm-label-offset: 4px !default;

/// The font size of the medium Switch.
/// @group switch
$kendo-switch-md-font-size: 10px !default;
/// The track width of the medium Switch.
/// @group switch
$kendo-switch-md-track-width: 40px !default;
/// The track height of the medium Switch.
/// @group switch
$kendo-switch-md-track-height: 20px !default;
/// The thumb width of the medium Switch.
/// @group switch
$kendo-switch-md-thumb-width: 14px !default;
/// The thumb height of the medium Switch.
/// @group switch
$kendo-switch-md-thumb-height: 14px !default;
/// The thumb offset of the medium Switch.
/// @group switch
$kendo-switch-md-thumb-offset: 4px !default;
/// The label offset of the medium Switch.
/// @group switch
$kendo-switch-md-label-offset: 5px !default;

/// The font size of the large Switch.
/// @group switch
$kendo-switch-lg-font-size: 10px !default;
/// The track width of the large Switch.
/// @group switch
$kendo-switch-lg-track-width: 44px !default;
/// The track height of the large Switch.
/// @group switch
$kendo-switch-lg-track-height: 24px !default;
/// The thumb width of the large Switch.
/// @group switch
$kendo-switch-lg-thumb-width: 18px !default;
/// The thumb height of the large Switch.
/// @group switch
$kendo-switch-lg-thumb-height: 18px !default;
/// The thumb offset of the large Switch.
/// @group switch
$kendo-switch-lg-thumb-offset: 5px !default;
/// The label offset of the large Switch.
/// @group switch
$kendo-switch-lg-label-offset: 6px !default;

/// The ring around the focused Switch.
/// @group switch
$kendo-switch-focus-ring: var( --kendo-switch-focus-ring, 2px solid k-color(border-alt) ) !default;

/// The background of the track when the Switch is not checked.
/// @group switch
$kendo-switch-off-track-bg: var( --kendo-switch-off-track-bg, k-color(surface-alt) ) !default;
/// The text color of the track when the Switch is not checked.
/// @group switch
$kendo-switch-off-track-text: var( --kendo-switch-off-track-text, k-color(on-app-surface) ) !default;
/// The border color of the track when the Switch is not checked.
/// @group switch
$kendo-switch-off-track-border: var( --kendo-switch-off-track-border, k-color(border) ) !default;

/// The background of the track when the hovered Switch is not checked.
/// @group switch
$kendo-switch-off-track-hover-bg: var( --kendo-switch-off-track-hover-bg, k-color(surface-alt) ) !default;
/// The text color of the track when the hovered Switch is not checked.
/// @group switch
$kendo-switch-off-track-hover-text: var( --kendo-switch-off-track-hover-text, k-color(on-app-surface) ) !default;
/// The border color of the track when the hovered Switch is not checked.
/// @group switch
$kendo-switch-off-track-hover-border: var( --kendo-switch-off-track-hover-border, k-color(border-alt) ) !default;

/// The background of the track when the focused Switch is not checked.
/// @group switch
$kendo-switch-off-track-focus-bg: var( --kendo-switch-off-track-focus-bg, k-color(surface-alt) ) !default;
/// The text color of the track when the focused Switch is not checked.
/// @group switch
$kendo-switch-off-track-focus-text: var( --kendo-switch-off-track-focus-text, k-color(on-app-surface) ) !default;
/// The border color of the track when the focused Switch is not checked.
/// @group switch
$kendo-switch-off-track-focus-border: var( --kendo-switch-off-track-focus-border, k-color(border) ) !default;

/// The background of the track when the disabled Switch is not checked.
/// @group switch
$kendo-switch-off-track-disabled-bg: var( --kendo-switch-off-track-disabled-bg, k-color(surface-alt) ) !default;
/// The text color of the track when the disabled Switch is not checked.
/// @group switch
$kendo-switch-off-track-disabled-text: var( --kendo-switch-off-track-disabled-text, k-color(on-app-surface) ) !default;
/// The border color of the track when the disabled Switch is not checked.
/// @group switch
$kendo-switch-off-track-disabled-border: var( --kendo-switch-off-track-disabled-border, color-mix(in srgb, k-color(on-app-surface) 14%, transparent) ) !default;

/// The background of the thumb when the Switch is not checked.
/// @group switch
$kendo-switch-off-thumb-bg: var( --kendo-switch-off-thumb-bg, k-color(subtle) ) !default;
/// The text color of the thumb when the Switch is not checked.
/// @group switch
$kendo-switch-off-thumb-text: var( --kendo-switch-off-thumb-text, inherit ) !default;
/// The border color of the thumb when the Switch is not checked.
/// @group switch
$kendo-switch-off-thumb-border: var( --kendo-switch-off-thumb-border, k-color(border) ) !default;

/// The background of the thumb when the hovered Switch is not checked.
/// @group switch
$kendo-switch-off-thumb-hover-bg: var( --kendo-switch-off-thumb-hover-bg, k-color(on-app-surface) ) !default;
/// The text color of the thumb when the hovered Switch is not checked.
/// @group switch
$kendo-switch-off-thumb-hover-text: var( --kendo-switch-off-thumb-hover-text, inherit ) !default;
/// The border color of the thumb when the hovered Switch is not checked.
/// @group switch
$kendo-switch-off-thumb-hover-border: var( --kendo-switch-off-thumb-hover-border, k-color(border-alt) ) !default;

/// The background of the thumb when the disabled Switch is not checked.
/// @group switch
$kendo-switch-off-thumb-disabled-bg: var( --kendo-switch-off-thumb-disabled-bg, color-mix(in srgb, k-color(on-app-surface) 30%, transparent) ) !default;
/// The text color of the thumb when the disabled Switch is not checked.
/// @group switch
$kendo-switch-off-thumb-disabled-text: var( --kendo-switch-off-thumb-disabled-text, inherit ) !default;
/// The border color of the thumb when the disabled Switch is not checked.
/// @group switch
$kendo-switch-off-thumb-disabled-border: var( --kendo-switch-off-thumb-disabled-border, color-mix(in srgb, k-color(on-app-surface) 30%, transparent) ) !default;

/// The background of the track when the Switch is checked.
/// @group switch
$kendo-switch-on-track-bg: var( --kendo-switch-on-track-bg, k-color(primary) ) !default;
/// The text color of the track when the Switch is checked.
/// @group switch
$kendo-switch-on-track-text: var( --kendo-switch-on-track-text, k-color(app-surface) ) !default;
/// The border color of the track when the Switch is checked.
/// @group switch
$kendo-switch-on-track-border: var( --kendo-switch-on-track-border, $kendo-switch-on-track-bg ) !default;

/// The background of the track when the hovered Switch is checked.
/// @group switch
$kendo-switch-on-track-hover-bg: var( --kendo-switch-on-track-hover-bg, k-color(primary-hover) ) !default;
/// The text color of the track when the hovered Switch is checked.
/// @group switch
$kendo-switch-on-track-hover-text: var( --kendo-switch-on-track-hover-text, k-color(app-surface) ) !default;
/// The border color of the track when the hovered Switch is checked.
/// @group switch
$kendo-switch-on-track-hover-border: var( --kendo-switch-on-track-hover-border, $kendo-switch-on-track-hover-bg ) !default;

/// The background of the track when the focused Switch is checked.
/// @group switch
$kendo-switch-on-track-focus-bg: var( --kendo-switch-on-track-focus-bg, k-color(primary) ) !default;
/// The text color of the track when the focused Switch is checked.
/// @group switch
$kendo-switch-on-track-focus-text: var( --kendo-switch-on-track-focus-text, k-color(app-surface) ) !default;
/// The border color of the track when the focused Switch is checked.
/// @group switch
$kendo-switch-on-track-focus-border: var( --kendo-switch-on-track-focus-border, $kendo-switch-on-track-focus-bg ) !default;

/// The background of the track when the disabled Switch is checked.
/// @group switch
$kendo-switch-on-track-disabled-bg: var( --kendo-switch-on-track-disabled-bg, color-mix(in srgb, k-color(on-app-surface) 7%, transparent) ) !default;
/// The text color of the track when the disabled Switch is checked.
/// @group switch
$kendo-switch-on-track-disabled-text: var( --kendo-switch-on-track-disabled-text, k-color(app-surface) ) !default;
/// The border color of the track when the disabled Switch is checked.
/// @group switch
$kendo-switch-on-track-disabled-border: var( --kendo-switch-on-track-disabled-border, transparent ) !default;

/// The background of the thumb when the Switch is checked.
/// @group switch
$kendo-switch-on-thumb-bg: var( --kendo-switch-on-thumb-bg, k-color(app-surface) ) !default;
/// The text color of the thumb when the Switch is checked.
/// @group switch
$kendo-switch-on-thumb-text: var( --kendo-switch-on-thumb-text, inherit ) !default;
/// The border color of the thumb when the Switch is checked.
/// @group switch
$kendo-switch-on-thumb-border: var( --kendo-switch-on-thumb-border, inherit ) !default;

/// The background of the thumb when the hovered Switch is checked.
/// @group switch
$kendo-switch-on-thumb-hover-bg: var( --kendo-switch-on-thumb-hover-bg, k-color(app-surface) ) !default;
/// The text color of the thumb when the hovered Switch is checked.
/// @group switch
$kendo-switch-on-thumb-hover-text: var( --kendo-switch-on-thumb-hover-text, inherit ) !default;
/// The border color of the thumb when the hovered Switch is checked.
/// @group switch
$kendo-switch-on-thumb-hover-border: var( --kendo-switch-on-thumb-hover-border, inherit ) !default;

/// The background of the thumb when the disabled Switch is checked.
/// @group switch
$kendo-switch-on-thumb-disabled-bg: var( --kendo-switch-on-thumb-disabled-bg, color-mix(in srgb, k-color(on-app-surface) 30%, transparent) ) !default;
/// The text color of the thumb when the disabled Switch is checked.
/// @group switch
$kendo-switch-on-thumb-disabled-text: var( --kendo-switch-on-thumb-disabled-text, inherit ) !default;
/// The border color of the thumb when the disabled Switch is checked.
/// @group switch
$kendo-switch-on-thumb-disabled-border: var( --kendo-switch-on-thumb-disabled-border, color-mix(in srgb, k-color(on-app-surface) 30%, transparent) ) !default;

@forward "@progress/kendo-theme-core/scss/components/switch/_variables.scss" with (
    $kendo-switch-default-size: $kendo-switch-default-size,
    $kendo-switch-default-track-roundness: $kendo-switch-default-track-roundness,
    $kendo-switch-default-thumb-roundness: $kendo-switch-default-thumb-roundness,
    $kendo-switch-font-family: $kendo-switch-font-family,
    $kendo-switch-track-border-width: $kendo-switch-track-border-width,
    $kendo-switch-thumb-border-width: $kendo-switch-thumb-border-width,
    $kendo-switch-label-text-transform: $kendo-switch-label-text-transform,
    $kendo-switch-label-display: $kendo-switch-label-display,
    $kendo-switch-sm-font-size: $kendo-switch-sm-font-size,
    $kendo-switch-sm-track-width: $kendo-switch-sm-track-width,
    $kendo-switch-sm-track-height: $kendo-switch-sm-track-height,
    $kendo-switch-sm-thumb-width: $kendo-switch-sm-thumb-width,
    $kendo-switch-sm-thumb-height: $kendo-switch-sm-thumb-height,
    $kendo-switch-sm-thumb-offset: $kendo-switch-sm-thumb-offset,
    $kendo-switch-sm-label-offset: $kendo-switch-sm-label-offset,
    $kendo-switch-md-font-size: $kendo-switch-md-font-size,
    $kendo-switch-md-track-width: $kendo-switch-md-track-width,
    $kendo-switch-md-track-height: $kendo-switch-md-track-height,
    $kendo-switch-md-thumb-width: $kendo-switch-md-thumb-width,
    $kendo-switch-md-thumb-height: $kendo-switch-md-thumb-height,
    $kendo-switch-md-thumb-offset: $kendo-switch-md-thumb-offset,
    $kendo-switch-md-label-offset: $kendo-switch-md-label-offset,
    $kendo-switch-lg-font-size: $kendo-switch-lg-font-size,
    $kendo-switch-lg-track-width: $kendo-switch-lg-track-width,
    $kendo-switch-lg-track-height: $kendo-switch-lg-track-height,
    $kendo-switch-lg-thumb-width: $kendo-switch-lg-thumb-width,
    $kendo-switch-lg-thumb-height: $kendo-switch-lg-thumb-height,
    $kendo-switch-lg-thumb-offset: $kendo-switch-lg-thumb-offset,
    $kendo-switch-lg-label-offset: $kendo-switch-lg-label-offset,
    $kendo-switch-off-track-bg: $kendo-switch-off-track-bg,
    $kendo-switch-off-track-text: $kendo-switch-off-track-text,
    $kendo-switch-off-track-border: $kendo-switch-off-track-border,
    $kendo-switch-off-track-hover-bg: $kendo-switch-off-track-hover-bg,
    $kendo-switch-off-track-hover-text: $kendo-switch-off-track-hover-text,
    $kendo-switch-off-track-hover-border: $kendo-switch-off-track-hover-border,
    $kendo-switch-off-track-focus-bg: $kendo-switch-off-track-focus-bg,
    $kendo-switch-off-track-focus-text: $kendo-switch-off-track-focus-text,
    $kendo-switch-off-track-focus-border: $kendo-switch-off-track-focus-border,
    $kendo-switch-off-track-disabled-bg: $kendo-switch-off-track-disabled-bg,
    $kendo-switch-off-track-disabled-text: $kendo-switch-off-track-disabled-text,
    $kendo-switch-off-track-disabled-border: $kendo-switch-off-track-disabled-border,
    $kendo-switch-off-thumb-bg: $kendo-switch-off-thumb-bg,
    $kendo-switch-off-thumb-text: $kendo-switch-off-thumb-text,
    $kendo-switch-off-thumb-border: $kendo-switch-off-thumb-border,
    $kendo-switch-off-thumb-hover-bg: $kendo-switch-off-thumb-hover-bg,
    $kendo-switch-off-thumb-hover-text: $kendo-switch-off-thumb-hover-text,
    $kendo-switch-off-thumb-hover-border: $kendo-switch-off-thumb-hover-border,
    $kendo-switch-off-thumb-disabled-bg: $kendo-switch-off-thumb-disabled-bg,
    $kendo-switch-off-thumb-disabled-text: $kendo-switch-off-thumb-disabled-text,
    $kendo-switch-off-thumb-disabled-border: $kendo-switch-off-thumb-disabled-border,
    $kendo-switch-on-track-bg: $kendo-switch-on-track-bg,
    $kendo-switch-on-track-text: $kendo-switch-on-track-text,
    $kendo-switch-on-track-border: $kendo-switch-on-track-border,
    $kendo-switch-on-track-hover-bg: $kendo-switch-on-track-hover-bg,
    $kendo-switch-on-track-hover-text: $kendo-switch-on-track-hover-text,
    $kendo-switch-on-track-hover-border: $kendo-switch-on-track-hover-border,
    $kendo-switch-on-track-focus-bg: $kendo-switch-on-track-focus-bg,
    $kendo-switch-on-track-focus-text: $kendo-switch-on-track-focus-text,
    $kendo-switch-on-track-focus-border: $kendo-switch-on-track-focus-border,
    $kendo-switch-on-track-disabled-bg: $kendo-switch-on-track-disabled-bg,
    $kendo-switch-on-track-disabled-text: $kendo-switch-on-track-disabled-text,
    $kendo-switch-on-track-disabled-border: $kendo-switch-on-track-disabled-border,
    $kendo-switch-on-thumb-bg: $kendo-switch-on-thumb-bg,
    $kendo-switch-on-thumb-text: $kendo-switch-on-thumb-text,
    $kendo-switch-on-thumb-border: $kendo-switch-on-thumb-border,
    $kendo-switch-on-thumb-hover-bg: $kendo-switch-on-thumb-hover-bg,
    $kendo-switch-on-thumb-hover-text: $kendo-switch-on-thumb-hover-text,
    $kendo-switch-on-thumb-hover-border: $kendo-switch-on-thumb-hover-border,
    $kendo-switch-on-thumb-disabled-bg: $kendo-switch-on-thumb-disabled-bg,
    $kendo-switch-on-thumb-disabled-text: $kendo-switch-on-thumb-disabled-text,
    $kendo-switch-on-thumb-disabled-border: $kendo-switch-on-thumb-disabled-border,
);