.tox {
    .tox-toggle when (@custom-properties-enabled = true) {
      --tox-private-slider-background-color: var(--tox-private-background-color);
      --tox-private-slider-border-color: light-dark(
        hsl(from var(--tox-private-color-white) h s calc(l - 11)), 
        hsl(from var(--tox-private-color-white) h s l / 15%));
      --tox-private-slider-handle-background-color: var(--tox-private-text-color);
  
      --tox-private-slider-checked-background-color: var(--tox-private-color-tint);
      --tox-private-slider-checked-border-color: var(--tox-private-color-tint);
      --tox-private-slider-checked-handle-background-color: var(--tox-private-color-white);
    }
  
    .tox-toggle {
      display: flex;
      align-items: center;
      gap: var(--tox-private-pad-xs, @pad-xs);
      padding: var(--tox-private-pad-xs, @pad-xs);
      font-weight: var(--tox-private-font-weight-normal, @font-weight-normal);
      line-height: var(--tox-private-control-line-height, 24px);
      white-space: nowrap;
      background-color: var(--tox-private-background-color, @background-color);
      color: var(--tox-private-text-color, @text-color);
  
      input {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
      }
    }
  
    .tox-toggle__slider {
      position: relative;
      cursor: pointer;
      box-sizing: border-box;
      -webkit-transition: 0.4s;
      transition: 0.4s;
      border-radius: 34px; 
      width: 28px;
      height: 16px;
      background-color: var(--tox-private-slider-background-color, @background-color);
      border: 1px solid var(
        --tox-private-slider-border-color,
        .bg-luma-checker(darken(@color-white, 11%), fade(@color-white, 15%))[@result]);
    }
  
    .tox-toggle__slider::before {
      position: absolute;
      content: "";
      height: 12px;
      width: 12px;
      left: 1px;
      bottom: 1px;
      -webkit-transition: 0.4s;
      transition: 0.4s;
      border-radius: 50%;
      background-color: var(--tox-private-slider-handle-background-color, @text-color);
    }
      
    input:checked + .tox-toggle__slider {
      background-color: var(--tox-private-slider-checked-background-color, @color-tint);
      border: 1px solid var(--tox-private-slider-checked-border-color, @color-tint);
    }
    
    input:focus + .tox-toggle__slider {
      box-shadow: 0 0 0 1px var(--tox-private-color-white, @color-white), 0 0 0 2px var(--tox-private-color-tint, @color-tint);
    }
    
    input:checked + .tox-toggle__slider::before {
      -webkit-transform: translateX(12px);
      -ms-transform: translateX(12px);
      transform: translateX(12px);
      background-color: var(--tox-private-slider-checked-handle-background-color, @color-white);
    }
  
    input:disabled + .tox-toggle__slider::before {
      opacity: 50%;
    }
  }