.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%;
  }
}