@use 'sass:color';
@use 'ej2-base/styles/definition/bootstrap' as *;
@forward 'ej2-base/styles/definition/bootstrap';

$switch-wrapper-width: 46px !default;
$switch-wrapper-height: 20px !default;
$switch-inner-width: 100% !default;
$switch-inner-height: 100% !default;
$switch-active-handle-bg: $brand-primary-font !default;
$switch-active-on-position-left: 0 !default;
$switch-inner-border-style: 2px solid $grey-cc !default;
$switch-inner-active: $brand-primary !default;
$switch-inner-active-bg: $brand-primary !default;
$switch-focus-inner-box-shadow: 0 0 0 2px #a1ccfd !default;
$switch-inner-active-border-color: $brand-primary !default;
$switch-active-background: transparent !default;
$switch-handle-top: 0 !default;
$switch-handle-left: 2px !default;
$switch-handle-margin: auto 0 !default;
$switch-inner-top: 0 !default;
$switch-inner-left: 0 !default;
$switch-off-text-indent: 16px !default;
$switch-on-text-indent: -14px !default;
$switch-handle-active: 100% !default;
$switch-handle-margin-left: -18px !default;
$switch-handle-shadow: 0 1px 2px 0 rgba(0, 0, 0, .2), 0 3px 4px 0 rgba(0, 0, 0, .1) !default;
$switch-handle-shadow-disabled: none !default;
$switch-active-on-opacity: 1 !default;
$switch-off-opacity: 1 !default;
$switch-off-bg-color: transparent !default;
$switch-off-active-left: 100% !default;
$switch-inner-bg: $grey-cc !default;
$switch-handle-bg-color: $brand-primary-font !default;
$switch-hover-bg-color: #bbb !default;
$switch-handle-height: 16px !default;
$switch-handle-width: 16px !default;
$switch-transition: all .2s ease-in-out .1s !default;
$switch-inner-transition: all .2s ease-in-out !default;
$switch-handle-transition: all .2s linear !default;
$switch-font-family: $font-family !default;
$switch-font-size: 12px !default;
$switch-inner-hover-bg-color: color.adjust($brand-primary, $lightness: -15%) !default;
$switch-inner-hover-border-color: color.adjust($brand-primary, $lightness: -15%) !default;
$switch-inner-on-font-color: $brand-primary-font !default;
$switch-inner-off-font-color: $grey-44 !default;
$switch-inner-focus-border: $grey-99 !default;
$switch-on-hover-bg-color: transparent !default;
$switch-on-off-disabled-bg-color: #d8d8d8 !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: $brand-primary-font !default;
$switch-handle-on-disabled-bg-color: $switch-handle-disabled-bg-color !default;
$switch-border-disabled-bg-color: #d8d8d8 !default;
$switch-disabled-font-color: #afafaf !default;
$switch-on-off-hover-bg-color: color.adjust($brand-primary, $lightness: -15%) !default;
$switch-inner-focus-bg-color: color.adjust($brand-primary, $lightness: -15%) !default;
$switch-inner-focus-off-bg: $grey-99 !default;
$switch-focus-border-color-active: color.adjust($brand-primary, $lightness: -15%) !default;
$switch-hover-border: #bbb !default;
$switch-hover-active-border: color.adjust($brand-primary, $lightness: -15%) !default;
$switch-handle-hover-bg-color: $brand-primary-font !default;
$switch-on-position-left: -100% !default;
$switch-on-position-left-rtl: 0 !default;
$switch-off-position-left: 0 !default;
$switch-off-position-left-rtl: -100% !default;
$switch-on-rtl: 100% !default;
$switch-off-rtl: 0 !default;
$switch-handle-radius: 50% !default;
$switch-handle-bottom: 0 !default;
$switch-border-radius: 20px !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: 38px !default;
$switch-small-handle-width: 12px !default;
$switch-small-handle-height: 12px !default;
$switch-small-handle-active-left: 100% !default;
$switch-small-handle-margin-left: -14px !default;
$switch-small-handle-active-left-rtl: 16px !default;
$switch-small-font-size: 8px !default;
$small-switch-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-on-text-indent: -11px !default;
$switch-small-off-text-indent: 11px !default;
$switch-small-disabled-rtl-active-bg-color: transparent !default;
$switch-on-bg-color: initial !default;
$switch-checked-ripple-bg-color: rgba(0, 0, 0, .12) !default;
$switch-ripple-bg-color: rgba(255, 64, 129, .12) !default;
$switch-on-disabled-bg-color: transparent !default;
$switch-inner-hover-on-font-color: #fff !default;
$switch-focused-outline: none !default;
$switch-focused-outline-offset: initial !default;
$switch-focused-outline-active: none !default;
$switch-handle-off-hover-bg-color: $brand-primary-font !default;

$switch-bigger-wrapper-height: 22px !default;
$switch-bigger-wrapper-width: 52px !default;
$switch-bigger-handle-width: 18px !default;
$switch-bigger-handle-height: 18px !default;
$switch-bigger-handle-active-left: 100% !default;
$switch-bigger-handle-margin-left: -20px !default;
$switch-bigger-handle-active-left-rtl: 22px !default;
$switch-bigger-font-size: 12px !default;
$switch-bigger-on-text-indent: -16px !default;
$switch-bigger-off-text-indent: 18px !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: 2px !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: 42px !default;
$switch-bigger-small-handle-width: 14px !default;
$switch-bigger-small-handle-height: 14px !default;
$switch-bigger-small-handle-active-left: 100% !default;
$switch-bigger-small-handle-margin-left: -16px !default;
$switch-bigger-small-handle-active-left-rtl: 18px !default;
$switch-bigger-small-font-size: 11px !default;
$bigger-small-switch-text-indent: 10px !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-on-text-indent: -12px !default;
$switch-bigger-small-off-text-indent: 15px !default;
$switch-bigger-small-handle-to: 0 !default;
$switch-bigger-small-handle-left: 2px !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;