@use 'ej2-base/styles/definition/fabric' as *;
@forward 'ej2-base/styles/definition/fabric';
$switch-wrapper-width: 44px !default;
$switch-active-background: $theme-primary !default;
$switch-wrapper-height: 20px !default;
$switch-handle-bg-color: $neutral-secondary !default;
$switch-off-bg-color: $neutral-white !default;
$switch-handle-position: 18px !default;
$active-bar-position: 0 !default;
$switch-active-on-position-left: 0 !default;
$switch-transition: all .25s cubic-bezier(.4, 0, .23, 1) .05s !default;
$switch-handle-transition: all .25s cubic-bezier(.4, 0, .23, 1) .05s !default;
$switch-inner-transition: all .25s cubic-bezier(.4, 0, .23, 1), outline-offset 0s !default;
$switch-label-text-indent: 0 !default;
$switch-border-radius: 20px !default;
$switch-handle-radius: 50% !default;
$switch-handle-active: 100% !default;
$switch-handle-margin-left: -16px !default;
$switch-handle-height: 12px !default;
$switch-handle-width: 12px !default;
$switch-handle-top: 0 !default;
$switch-handle-bottom: 0 !default;
$switch-handle-left: 4px !default;
$switch-inner-width: 100% !default;
$switch-inner-height: 100% !default;
$switch-inner-top: 0 !default;
$switch-inner-left: 0 !default;
$switch-on-position-left: -100% !default;
$switch-off-position-left: 0 !default;
$switch-inner-border-style: 2px solid #a6a6a6 !default;
$switch-handle-margin: auto 0 !default;
$switch-inner-active: $theme-primary !default;
$switch-off-active: 100% !default;
$switch-off-text-indent: 12px !default;
$switch-on-text-indent: -14px !default;
$switch-handle-shadow: none !default;
$switch-active-handle-bg: #fff !default;
$switch-active-on-opacity: 1 !default;
$switch-inner-active-bg: $theme-primary !default;
$switch-inner-active-border-color: $theme-primary !default;
$active-bar-opacity: 1 !default;
$switch-off-opacity: 1 !default;
$switch-on-off-disabled-bg-color-opacity: 1 !default;
$switch-font-family: $font-family !default;
$switch-font-size: 12px !default;
$switch-on-off-disabled-bg-color: #fff !default;
$switch-on-disabled-bg-color: $switch-on-off-disabled-bg-color !default;
$switch-on-off-disabled-bg-color-opacity: 1 !default;
$switch-handle-disabled-bg-color: $neutral-tertiary-alt !default;
$switch-handle-on-disabled-bg-color: $switch-handle-disabled-bg-color !default;
$switch-on-off-hover-bg-color: $theme-dark-alt !default;
$switch-inner-focus-bg-color: $theme-dark-alt !default;
$switch-on-disabled-bg-color: transparent !default;
$switch-inner-focus-border: $neutral-secondary !default;
$switch-on-hover-bg-color: $theme-dark-alt !default;
$switch-inner-hover-bg-color: $theme-dark-alt !default;
$switch-inner-hover-border-color: $theme-dark-alt !default;
$switch-hover-border: $neutral-secondary !default;
$switch-border-disabled-bg-color: $neutral-tertiary-alt !default;
$switch-disabled-font-color: $neutral-tertiary-alt !default;
$switch-hover-active-border: $theme-primary !default;
$switch-inner-on-font-color: #fff !default;
$switch-inner-off-font-color: #444 !default;
$switch-handle-hover-bg-color: #fff !default;
$focussed-switch-border: 1px solid #000 !default;
$switch-focused-outline: $neutral-secondary-alt 1px solid !default;
$switch-focused-outline-active: $neutral-secondary-alt 1px solid !default;
$switch-focused-outline-offset: 1px !default;
$switch-on-position-left-rtl: 0 !default;
$switch-off-position-left-rtl: -100% !default;
$switch-on-rtl: 100% !default;
$switch-off-rtl: 0 !default;
$switch-off-active-left: 100% !default;
$switch-on-bg-color: initial !default;
$switch-small-ripple-height: 36px !default;
$switch-small-ripple-left: -10px !default;
$switch-small-ripple-top: -10px !default;
$switch-small-ripple-width: 36px !default;
$switch-small-wrapper-height: 16px !default;
$switch-small-wrapper-width: 34px !default;
$switch-small-handle-width: 8px !default;
$switch-small-handle-height: 8px !default;
$switch-small-handle-active-left: 100% !default;
$switch-small-handle-margin-left: -12px !default;
$switch-small-handle-active-left-rtl: 16px !default;
$switch-small-font-size: 9px !default;
$switch-small-on-text-indent: -10px !default;
$switch-small-off-text-indent: 10px !default;
$switch-small-on-rtl: 100% !default;
$switch-small-off-rtl: 0 !default;
$switch-small-on-position-left-rtl: 0 !default;
$switch-small-off-position-left-rtl: -100% !default;
$switch-small-disabled-rtl-active-bg-color: transparent !default;
$switch-checked-ripple-bg-color: rgba(0, 0, 0, .12) !default;
$switch-ripple-bg-color: rgba(255, 64, 129, .12) !default;
$switch-inner-hover-on-font-color: #fff !default;
$switch-inner-bg: transparent !default;
$switch-handle-shadow-disabled: none !default;
$switch-hover-bg-color: transparent !default;
$switch-inner-focus-off-bg: transparent !default;
$switch-focus-inner-box-shadow: none !default;
$switch-focus-border-color-active: transparent !default;
$switch-handle-off-hover-bg-color: $neutral-secondary !default;

$switch-bigger-wrapper-height: 22px !default;
$switch-bigger-wrapper-width: 46px !default;
$switch-bigger-handle-width: 12px !default;
$switch-bigger-handle-height: 12px !default;
$switch-bigger-handle-active-left: 100% !default;
$switch-bigger-handle-margin-left: -17px !default;
$switch-bigger-handle-active-left-rtl: 21px !default;
$switch-bigger-font-size: 12px !default;
$switch-bigger-on-text-indent: -14px !default;
$switch-bigger-off-text-indent: 14px !default;
$switch-bigger-on-rtl: 100% !default;
$switch-bigger-off-rtl: 0 !default;
$switch-bigger-on-position-left-rtl: 0 !default;
$switch-bigger-off-position-left-rtl: -100% !default;
$switch-bigger-handle-top: 0 !default;
$switch-bigger-handle-left: 5px !default;
$switch-bigger-ripple-height: 52px !default;
$switch-bigger-ripple-left: -16px !default;
$switch-bigger-ripple-top: -16px !default;
$switch-bigger-ripple-width: 52px !default;

$switch-bigger-small-wrapper-height: 18px !default;
$switch-bigger-small-wrapper-width: 38px !default;
$switch-bigger-small-handle-width: 10px !default;
$switch-bigger-small-handle-height: 10px !default;
$switch-bigger-small-handle-active-left: 100% !default;
$switch-bigger-small-handle-margin-left: -14px !default;
$switch-bigger-small-handle-active-left-rtl: 18px !default;
$switch-bigger-small-font-size: 9px !default;
$switch-bigger-small-on-text-indent: -12px !default;
$switch-bigger-small-off-text-indent: 12px !default;
$switch-bigger-small-on-rtl: 100% !default;
$switch-bigger-small-off-rtl: 0 !default;
$switch-bigger-small-on-position-left-rtl: 0 !default;
$switch-bigger-small-off-position-left-rtl: -100% !default;
$switch-bigger-small-handle-to: 0 !default;
$switch-bigger-small-handle-left: 4px !default;
$switch-bigger-small-ripple-height: 36px !default;
$switch-bigger-small-ripple-left: -10px !default;
$switch-bigger-small-ripple-top: -10px !default;
$switch-bigger-small-ripple-width: 36px !default;
$switch-ripple-border-radius: 50% !default;
$switch-height: 1px !default;
$switch-ripple-container-height: 52px !default;
$switch-width: 1px !default;
$switch-ripple-container-width: 52px !default;
$switch-ripple-container-bottom: -9px !default;
$switch-ripple-container-left: -17px !default;
$switch-ripple-container-top: -17px !default;