/** Styles for the theme: Base-Dark */

/* Style for the main element */
.TcHmi_Controls_Beckhoff_TcHmiToggleSwitch {
    --tchmi-background: linear-gradient(135deg, #2a3845, #3d5974 70%);
    --tchmi-background-active: linear-gradient(135deg, #4089cb, #2775be 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);
    border-radius: calc(var(--square-size) / 2);
    height: var(--square-size);
    width: calc(var(--square-size) + var(--square-size));
}

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

.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));
}
