:import {
  -st-from: "wix-ui-core/dist/src/components/toggle-switch/ToggleSwitch.st.css";
  -st-default: ToggleSwitch;
}

:import {
  -st-from: "wix-ui-core/dist/src/components/toggle-switch/ToggleSwitchStyle.st.css";
  -st-default: ToggleSwitchStyle;
}

:import {
  -st-from: "wix-ui-core/dist/src/components/toggle-switch/ToggleSwitchColor.st.css";
  -st-default: ToggleSwitchColor;
}

:import {
  -st-from: "wix-ui-core/dist/src/components/toggle-switch/ToggleSwitchLayout.st.css";
  -st-default: ToggleSwitchLayout;
}

:import {
  -st-from: "../Foundation/stylable/colors.st.css";
  -st-named:
     THEME-COLOR-10,  THEME-COLOR-20,  THEME-COLOR-30,  THEME-COLOR-40,
    D50,
    F00,
    G10, G20, G30, G40,
    R10, R20, R30, R40,
    D80;
}

:import {
  -st-from: "../Foundation/stylable/shadows.st.css";
  -st-named: shadow10;
}

.root {
  -st-extends: ToggleSwitch;
  -st-states:
    size(enum(small, medium, large)),
    skin(enum(standard, success, error));

  -st-mixin: ToggleSwitchStyle;
}

.root:size(small) {
  -st-mixin: ToggleSwitchLayout(
    rootWidth 30px,
    rootHeight 16px,
    knobWidth 14px,
    knobHeight 14px
  );
}

.root:size(medium) {
  -st-mixin: ToggleSwitchLayout(
    rootWidth 36px,
    rootHeight 20px,
    knobWidth 18px,
    knobHeight 18px
  );
}

.root:size(large) {
  -st-mixin: ToggleSwitchLayout(
    rootWidth 48px,
    rootHeight 24px,
    knobWidth 22px,
    knobHeight 22px
  );
}

.root:skin(standard) {
  -st-mixin: ToggleSwitchColor(
    colorUnchecked      value(THEME-COLOR-40),
    colorChecked        value(THEME-COLOR-10),
    colorUncheckedHover value(THEME-COLOR-30),
    colorCheckedHover   value(THEME-COLOR-20),
    colorDisabled       value(D50)
  );
}

.root:skin(success) {
  -st-mixin: ToggleSwitchColor(
    colorUnchecked      value(G40),
    colorChecked        value(G10),
    colorUncheckedHover value(G30),
    colorCheckedHover   value(G20),
    colorDisabled       value(D50)
  );
}

.root:skin(error) {
  -st-mixin: ToggleSwitchColor(
    colorUnchecked      value(R40),
    colorChecked        value(R10),
    colorUncheckedHover value(R30),
    colorCheckedHover   value(R20),
    colorDisabled       value(D50)
  );
}

.root:focus-visible::track {
  box-shadow: 0 0 0 3px value(F00);
}

.root::knob {
  box-shadow: value(shadow10);
}