@st-namespace 'ToggleSwitch-st-css';
@st-import [ --wix-color-1, --wix-color-8, --wix-color-5, --wix-color-29 ] from '@wix/tpa-style-webpack-plugin/stylable-variables.st.css';
@st-import [ --wst-links-and-actions-color-rgb, --wst-paragraph-2-color-rgb, --wst-primary-background-color-rgb, --wst-system-disabled-color-rgb ] from '@wix/wix-site-theme-variables/stylable-variables.st.css';
@st-import [ createColor ] from '../../common/formatters.st';
@st-import ToggleSwitch from '../internal/WixUiCoreComponents/components/CoreToggleSwitch/CoreToggleSwitch.st.css';
@st-import ToggleSwitchStyle from '../internal/WixUiCoreComponents/components/CoreToggleSwitch/CoreToggleSwitchStyle.st.css';
@st-import ToggleSwitchLayout from '../internal/WixUiCoreComponents/components/CoreToggleSwitch/CoreToggleSwitchLayout.st.css';
@st-import ToggleSwitchColor from '../internal/WixUiCoreComponents/components/CoreToggleSwitch/CoreToggleSwitchColor.st.css';
@st-import [ focusRing ] from '../../common/palette.st.css';

/*
 * The color of the track background
 * @type color
 * @default --wix-color-5
 */
@property st-global(--wix-ui-tpa-toggle-switch-base-color);

/*
 * The color of the toggle when it is on
 * @type color
 * @default --wix-color-8
 */
@property st-global(--wix-ui-tpa-toggle-switch-selected-color);

/*
 * The background color of the knob
 * @type color
 * @default --wix-color-1
 */
@property st-global(--wix-ui-tpa-toggle-switch-knob-color);

/*
 * The color of the toggle when disabled
 * @type color
 * @default --wix-color-3 with opacity 0.9
 */
@property st-global(--wix-ui-tpa-toggle-switch-disabled-color);

.root {
  -st-extends: ToggleSwitch;
  -st-mixin: ToggleSwitchStyle, ToggleSwitchLayout, ToggleSwitchColor;

  color: createColor(--wix-ui-tpa-toggle-switch-base-color, var(--wst-primary-background-color-rgb, var(--wix-color-1)));
  opacity: .7;
  transition: all .2s ease;
}

.root::track {
  background-color: createColor(--wix-ui-tpa-toggle-switch-base-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)));
  transition-duration: .2s;
}

.root::knob {
  background-color: createColor(--wix-ui-tpa-toggle-switch-knob-color, var(--wst-primary-background-color-rgb, var(--wix-color-1)));
  transition-duration: .2s;
}

.root:hover {
  opacity: 1;
}

.root:checked {
  color: createColor(--wix-ui-tpa-toggle-switch-selected-color, var(--wst-links-and-actions-color-rgb, var(--wix-color-8)));
  opacity: 1;
}

.root:checked::track {
  background-color: createColor(--wix-ui-tpa-toggle-switch-selected-color, var(--wst-links-and-actions-color-rgb, var(--wix-color-8)));
}

.root:checked:hover {
  opacity: .7;
}

.root:disabled,
.root:disabled:hover,
.root:disabled:checked,
.root:disabled:checked:hover {
  opacity: 1;
  color: createColor(--wix-ui-tpa-toggle-switch-disabled-color, (var(--wix-color-29), 0.9));
}

.root:disabled::track {
  background-color: createColor(--wix-ui-tpa-toggle-switch-disabled-color, var(--wst-system-disabled-color-rgb, var(--wix-color-29), 0.9));
}

.root:disabled::knob {
  background-color: rgb(var(--wst-primary-background-color-rgb, var(--wix-color-1)), 0.6);
}

:global(#SITE_CONTAINER.focus-ring-active) .root:focus-visible::track {
  -st-mixin: focusRing();
}

:global(#SITE_CONTAINER.focus-ring-active) .root:focus-visible::knob {
  z-index: 1000;
}

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