/** Styles for the theme: Base */

/* Style for the main element */
.TcHmi_Controls_Beckhoff_TcHmiToggleSwitch {
    --tchmi-background: linear-gradient(to bottom right, #c0c0c5, #d7d7d9 70%);
    --tchmi-background-active: linear-gradient(to bottom right, #2774ba, #4794da 40%);
    --tchmi-indicator: white;
}
.TcHmi_Controls_Beckhoff_TcHmiToggleSwitch .TcHmi_Controls_Beckhoff_TcHmiCheckbox-template {
    background: var(--tchmi-background);
    box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.15), inset 0px 0px 3px 2px rgba(0, 0, 0, 0.05);
}

/* class TcHmi_Controls_Beckhoff_TcHmiCheckbox-active will be set/unset in the control */
.TcHmi_Controls_Beckhoff_TcHmiToggleSwitch.TcHmi_Controls_Beckhoff_TcHmiCheckbox-active .TcHmi_Controls_Beckhoff_TcHmiCheckbox-template {
    background: var(--tchmi-background-active);
}

/* The variable --square-size is set in the control*/
.TcHmi_Controls_Beckhoff_TcHmiToggleSwitch .TcHmi_Controls_Beckhoff_TcHmiCheckbox-template {
    border-radius: calc(var(--square-size) / 2);
    height: var(--square-size);
    width: calc(var(--square-size) + var(--square-size));
}

.TcHmi_Controls_Beckhoff_TcHmiToggleSwitch .TcHmi_Controls_Beckhoff_TcHmiCheckbox-template .TcHmi_Controls_Beckhoff_TcHmiToggleSwitch-toggle-state-indicator {
    background: var(--tchmi-indicator);
    border-radius: calc(var(--square-size) * 0.618 / 2);
    height: calc(var(--square-size) * 0.618);
    width: calc(var(--square-size) * 0.618);
    top: calc(var(--square-size) * 0.382 / 2);
    left: calc(var(--square-size) * 0.382 / 2);
    transition: left 0.25s ease;
    box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.1);
}

.TcHmi_Controls_Beckhoff_TcHmiToggleSwitch.TcHmi_Controls_Beckhoff_TcHmiCheckbox-active .TcHmi_Controls_Beckhoff_TcHmiCheckbox-template .TcHmi_Controls_Beckhoff_TcHmiToggleSwitch-toggle-state-indicator {
    left: calc(var(--square-size) + calc(var(--square-size) * 0.382 / 2));
}