wix-style-react/dist/src/ToggleSwitch/ToggleSwitchCore/ToggleSwitchCoreLayout.st.css

wix-style-react

:import {
  -st-from: "./ToggleSwitchCore.st.css";
  -st-default: ToggleSwitchCore;
}

:import {
  -st-from: "./mixins/calc";
  -st-default: calc
}

@st-import [
  --wds-border-radius-full,
  --wds-toggle-switch-knob-size-large,
  --wds-toggle-switch-padding,
  --wds-toggle-switch-width-large,
  ] from "@wix/design-system-tokens/all.st.css";

:vars {
  rootWidth: var(--wds-toggle-switch-width-large, 46px);
  rootHeight: var(--wds-toggle-switch-knob-size-large, 22px);

  knobWidth: var(--wds-toggle-switch-knob-size-large, calc(value(rootHeight) / 1.2));
  knobHeight: var(--wds-toggle-switch-knob-size-large, calc(value(rootHeight) / 1.2));
  trackWidth: value(rootWidth);
  trackHeight: value(rootHeight);
  knobMovementRange: calc(calc(value(trackWidth) / 2) - calc(value(knobWidth) / 2));
}

.root {
  -st-extends: ToggleSwitchCore;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* width: min-content is supported */
  /* stylelint-disable plugin/no-unsupported-browser-features */
  width: min-content;
}

.root::track {
  width: value(trackWidth);
  height: value(trackHeight);
  padding: var(--wds-toggle-switch-padding, 1px);
  border-radius: var(--wds-border-radius-full, value(trackHeight));
  box-sizing: content-box;
}

.root::knob {
  position: absolute;
  box-sizing: border-box;
  width: value(knobWidth);
  height: value(knobHeight);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--wds-border-radius-full, value(knobHeight));
  transform: translateX(calc(-1 * value(knobMovementRange)));
}

.root::knobIcon {
  width: calc(value(knobHeight) / 2);
  height: calc(value(knobHeight) / 2);
}

.root::knobIcon > svg {
  display: block;
  width: 100%;
  height: 100%;
}

.root:checked::knob,
:global([dir="rtl"]) .root::knob {
  transform: translateX(value(knobMovementRange));
}

:global([dir="rtl"]) .root:checked::knob {
  transform: translateX(calc(-1 * value(knobMovementRange)));
}

/* st-namespace-reference="../../../../src/ToggleSwitch/ToggleSwitchCore/ToggleSwitchCoreLayout.st.css" */