/* A toggle whose label sits above it, as an input's does, is as tall as the inputs beside it, keeps the switch's 2:1 shape, and grows with the control scale.
   Opt-in through .ftk-toggle-input-height (c-labelled-toggle, and a form's toggle field with its label on top); a toggle with no label or a label beside it keeps Salesforce's size.
   Proportions are SLDS's own (track 3rem x 1.5rem, knob 1.25rem), measured against the track height. */
.ftk-toggle-input-height .slds-checkbox_toggle {
    --_ftk-toggle-height: var(--ftk-input-height, var(--ftk-control-height, calc(2rem * var(--ftk-control-scale, 1))));
    --_ftk-toggle-inset: calc(var(--_ftk-toggle-height) / 24);
}
.ftk-toggle-input-height .slds-checkbox_toggle .slds-checkbox_faux {
    width: calc(var(--_ftk-toggle-height) * 2);
    height: var(--_ftk-toggle-height);
    border-radius: var(--_ftk-toggle-height);
}
.ftk-toggle-input-height .slds-checkbox_toggle input:not(:checked) + .slds-checkbox_faux_container .slds-checkbox_faux::after,
.ftk-toggle-input-height .slds-checkbox_toggle input:checked + .slds-checkbox_faux_container .slds-checkbox_faux::before {
    width: calc(var(--_ftk-toggle-height) * 5 / 6);
    height: calc(var(--_ftk-toggle-height) * 5 / 6);
    top: var(--_ftk-toggle-inset);
}
.ftk-toggle-input-height .slds-checkbox_toggle input:not(:checked) + .slds-checkbox_faux_container .slds-checkbox_faux::after {
    left: var(--_ftk-toggle-inset);
}
.ftk-toggle-input-height .slds-checkbox_toggle input:checked + .slds-checkbox_faux_container .slds-checkbox_faux::before {
    left: auto;
    right: var(--_ftk-toggle-inset);
}
.ftk-toggle-input-height .slds-checkbox_toggle input:checked + .slds-checkbox_faux_container .slds-checkbox_faux::after {
    left: calc(var(--_ftk-toggle-height) * 0.4);
    right: auto;
    top: calc(var(--_ftk-toggle-height) / 6);
    width: calc(var(--_ftk-toggle-height) * 0.3);
    height: calc(var(--_ftk-toggle-height) * 0.4667);
}