/* =====================================================
    COMPONENT SHARED STYLES
   ------------------------------------------------------
*/

$el: 'toggle-switches';

/* =====================================================
    TOOLTIPS SPECIFIC VARIABLES
   ------------------------------------------------------
  */
$toggle-switches-label-font-family:                         var(--dlt-font-family-base, $font-family-base);
$toggle-switches-label-font-weight:                         var(--dlt-font-weight-medium, 500);
$toggle-switches-label-font-size:                           var(--dlt-font-size-xs, 0.875rem);
$toggle-switches-label-color:                               var(--dlt-#{$el}-color-text-default, $component-color-text-default);
$toggle-switches-label-display:                             inline-block;
$toggle-switches-label-vertical-align:                      baseline;
$toggle-switches-label-margin:                              0 0.8rem 0 0;
$toggle-switches-label-line-height:                         1rem;

$toggle-switches-label-font-size-sm:                        var(--dlt-font-size-xxs, 0.75rem);

$toggle-switches-item-display:                              flex;
$toggle-switches-item-flex-direction:                       column;
$toggle-switches-item-flex:                                 1 1;
$toggle-switches-item-align-items:                          flex-start;

$toggle-switches-input-position:                            absolute;
$toggle-switches-input-width:                               1px;
$toggle-switches-input-height:                              1px;
$toggle-switches-input-padding:                             0;
$toggle-switches-input-margin:                              -1px;
$toggle-switches-input-overflow:                            hidden;
$toggle-switches-input-clip:                                rect(0, 0, 0, 0);
$toggle-switches-input-border:                              1px;
$toggle-switches-input-visibility:                          visible;
$toggle-switches-input-white-space:                         nowrap;

$toggle-switches-input-box-shadow:                          inset 0px 0px 0px 1px var(--dlt-#{$el}-border-input-focus, $component-color-border-input-focus);
$toggle-switches-input-focus-border:                        var(--dlt-border-width-default,  1px)
                                                            var(--dlt-border-style-default, solid)
                                                            var(--dlt-#{$el}-border-input-focus, $component-color-border-input-focus);

$toggle-switches-text-position:                             relative;
$toggle-switches-text-display:                              flex;   
$toggle-switches-text-align-items:                          center;
$toggle-switches-text-cursor:                               pointer;
$toggle-switches-text-margin-top:                           1px;

$toggle-switches-text-left-margin-right:                    0.5rem;
$toggle-switches-text-right-margin-left:                    0.5rem;

$toggle-switches-text-left-right-color:                     var(--dlt-#{$el}-color-text-default, $component-color-text-default);
$toggle-switches-text-left-right-position:                  relative;
$toggle-switches-text-left-right-font-family:               var(--dlt-font-family-base, $font-family-base);
$toggle-switches-text-left-right-font-weight:               var(--dlt-font-weight-medium, 500);
$toggle-switches-text-left-right-font-size:                 var(--dlt-font-size-xs, 0.875rem);

$toggle-switches-on-display:                                none;
$toggle-switches-on-off-color:                              var(--dlt-#{$el}-color-text-default, $component-color-text-default);
$toggle-switches-on-off-position:                           relative;
$toggle-switches-on-off-font-family:                        var(--dlt-font-family-base, $font-family-base);
$toggle-switches-on-off-font-weight:                        var(--dlt-font-weight-regular, 400);
$toggle-switches-on-off-font-size:                          var(--dlt-font-size-xs, 0.875rem);
// $toggle-switches-on-off-left: 0.5rem;
// $toggle-switches-on-off-top:                                4px;
$toggle-switches-on-off-top:                                0px;
// $toggle-switches-on-off-left:                               12px;
$toggle-switches-on-off-left:                               -3px;

$toggle-switches-checked-on-display:                        block;
$toggle-switches-checked-off-display:                       none;

$toggle-switches-text-disabled-cursor:                      not-allowed;
$toggle-switches-text-disabled-opacity:                     var(--dlt-#{$el}-opacity-disabled, $component-opacity-disabled);

$toggle-switches-appearance-position:                       relative;
$toggle-switches-appearance-left:                           -3px;
$toggle-switches-appearance-border:                         var(--dlt-border-width-default,  1px)
                                                            var(--dlt-border-style-default, solid)
                                                            transparent;
$toggle-switches-appearance-border-color-focus:             var(--dlt-#{$el}-border-input-focus, $component-color-border-input-focus);
// $toggle-switches-appearance-width:                          2.5rem;

// $toggle-switches-appearance-width-sm:                       2rem;

$toggle-switches-appearance-after-before-position:          absolute;
$toggle-switches-appearance-after-before-display:           block;
$toggle-switches-appearance-after-before-content:           "";
$toggle-switches-appearance-after-before-transition:        var(--dlt-time-transition-short, .25s) ease-in-out !default;

$toggle-switches-appearance-before-width:                   48px;
$toggle-switches-appearance-before-height:                  1.5rem;
$toggle-switches-appearance-height:                         calc($toggle-switches-appearance-before-height + 2 * (2px + 1px));
$toggle-switches-appearance-width:                          calc($toggle-switches-appearance-before-width + 2 * (2px + 2px)) - 2px;
$toggle-switches-appearance-border-radius:                  calc(0.5 * $toggle-switches-appearance-height);
// $toggle-switches-appearance-before-top:                     -0.5rem;
$toggle-switches-appearance-before-top:                     2px;
$toggle-switches-appearance-before-left:                    2px;
$toggle-switches-appearance-before-border-radius:           1rem;
$toggle-switches-appearance-before-background-color:        var(--dlt-#{$el}-color-background-interactive-secondary-default, $component-color-background-interactive-secondary-default);
//
$toggle-switches-appearance-before-checked-text-background-color:  var(--dlt-#{$el}-color-background-toggle-knob-active, $component-color-background-toggle-knob-active);

$toggle-switches-appearance-before-border:                  $forms-border-width $forms-border-style var(--dlt-#{$el}-color-border-input-default, $component-color-border-input-default);

$toggle-switches-appearance-after-box-sizing:               border-box;
$toggle-switches-appearance-after-top:                      6px;
$toggle-switches-appearance-after-left:                     6px;
$toggle-switches-appearance-after-width:                    1rem;
$toggle-switches-appearance-after-height:                   1rem;
$toggle-switches-appearance-after-background-color:         var(--dlt-color-icon-muted-secondary, $brand-primary-light-css-var);
$toggle-switches-appearance-after-border-radius:            50%;

$toggle-switches-on-off-after-background-color:             var(--dlt-color-background-interactive-contrast, $gray-50);
$toggle-switches-appearance-after-background-color:         var(--dlt-#{$el}-color-background-interactive-secondary-default, $component-color-background-interactive-secondary-default);
$toggle-switches-appearance-after-checked-text-webkit-transform:  translateX(1.5rem);
$toggle-switches-appearance-after-checked-text-transform:         translateX(1.5rem);

$toggle-switches-appearance-after-checked-text-box-shadow:        none;
$toggle-switches-appearance-after-checked-text-border-color:      var(--dlt-#{$el}-border-input-focus, $component-color-border-input-focus);

$toggle-switches-appearance-after-checked-text-left-sm:     -0.2rem;

$toggle-switches-appearance-before-width-sm:                32px;
$toggle-switches-appearance-before-height-sm:               1rem;

$toggle-switches-appearance-height-sm:                      calc($toggle-switches-appearance-before-height-sm + 2 * (2px + 1px));
$toggle-switches-appearance-width-sm:                       calc($toggle-switches-appearance-before-width-sm + 2 * (2px + 2px)) - 2px;
$toggle-switches-appearance-top-sm:                         -2px;
$toggle-switches-appearance-left-sm:                        -4px;

$toggle-switches-appearance-before-top-sm:                  2px;
$toggle-switches-appearance-before-border-radius-sm:        1rem;
$toggle-switches-appearance-before-background-color-sm:     var(--dlt-#{$el}-color-background-default, $component-color-background-default);
$toggle-switches-appearance-before-border-sm:               $forms-border-width $forms-border-style var(--dlt-#{$el}-color-border-input-default, $component-color-border-input-default);

$toggle-switches-appearance-after-top-sm:                   5px;
$toggle-switches-appearance-after-left-sm:                  5px;
$toggle-switches-appearance-after-width-sm:                 0.625rem;
$toggle-switches-appearance-after-height-sm:                0.625rem;
$toggle-switches-appearance-after-border-radius-sm:         50%;

$toggle-switches-on-off-left-sm:                            -0.25rem;
$toggle-switches-on-off-top-sm:                             -2px;
$toggle-switches-on-off-font-size-sm:                       0.75rem;
