@st-namespace 'ToggleSwitch-deprecated-st-css';
:import {
    -st-from: "../../common/formatters.st";
    -st-named: color, fallback, font, applyOpacity;
}

:import {
    -st-from: "../internal/WixUiCoreComponents/components/CoreToggleSwitch/CoreToggleSwitch.st.css";
    -st-default: ToggleSwitch;
}

:import {
    -st-from: "../internal/WixUiCoreComponents/components/CoreToggleSwitch/CoreToggleSwitchStyle.st.css";
    -st-default: ToggleSwitchStyle;
}

:import {
    -st-from: "../internal/WixUiCoreComponents/components/CoreToggleSwitch/CoreToggleSwitchLayout.st.css";
    -st-default: ToggleSwitchLayout;
}

:import {
    -st-from: "../internal/WixUiCoreComponents/components/CoreToggleSwitch/CoreToggleSwitchColor.st.css";
    -st-default: ToggleSwitchColor;
}

:import {
    -st-from: "../../common/palette.st.css";
    -st-named: focusRing;
}

/*Defaults*/
:vars {
    DefaultBaseColor: color(color-5);
    DefaultSelectedColor: color(color-8);
    DefaultKnobColor: color(color-1);
    DefaultDisabledColor: applyOpacity(color(color-3), 0.9);
    DefaultTransitionDuration: .2s;
}

/*Overrides*/
:vars {
    /*
      The color of the track background
      @default color-5
    */
    BaseColor: --overridable;
    /*
      The color of the toggle when it is on
      @default color-8
    */
    SelectedColor: --overridable;
    /*
      The background color of the knob
      @default color-1
    */
    KnobColor: --overridable;
    /*
      The color of the toggle when disabled
      @default color-3 with opacity 0.9
    */
    DisabledColor: --overridable;
}

/*
 * 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);

:vars {
    UsedBaseColor: color(fallback(value(BaseColor), value(DefaultBaseColor)));
    UsedSelectedColor: color(fallback(value(SelectedColor), value(DefaultSelectedColor)));
    UsedKnobColor: color(fallback(value(KnobColor), value(DefaultKnobColor)));
    UsedDisabledColor: color(fallback(value(DisabledColor), value(DefaultDisabledColor)));
}

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

    color: value(UsedBaseColor);
    opacity: .7;
    transition: all value(DefaultTransitionDuration) ease;
}

.root::track {
    background-color: value(UsedBaseColor);
    transition-duration: value(DefaultTransitionDuration);
}

.root::knob {
    background-color: value(UsedKnobColor);
    transition-duration: value(DefaultTransitionDuration);
}

.root:hover {
    opacity: 1;
}

.root:checked {
    color: value(UsedSelectedColor);
    opacity: 1;
}

.root:checked::track {
    background-color: value(UsedSelectedColor);
}

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

.root:disabled,
.root:disabled:hover,
.root:disabled:checked,
.root:disabled:checked:hover {
    opacity: 1;
    color: value(UsedDisabledColor);
}

.root:disabled::track {
    background-color: value(UsedDisabledColor);
}

.root:disabled::knob {
    background-color: applyOpacity(color(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.deprecated.st.css" */