/** Styles for the theme: Base */

/* Style for the main element */
.TcHmi_Controls_Beckhoff_TcHmiKeyboard,
.TcHmi_Controls_Beckhoff_TcHmiKeyboard-template-additional-keys-container,
.tchmi-keyboard {
    --tchmi-background: rgba(255, 255, 255, 0.5);
    --tchmi-color: #4c6374;
    --tchmi-backdrop-background: rgba(255, 255, 255, 0.8);
    --tchmi-key-background: linear-gradient(135deg, #eff1f3, #aeb9c2);
    --tchmi-key-color: #4794da;
    --tchmi-key-background-down: linear-gradient(135deg, #eff1f3, #aeb9c2);
    --tchmi-key-color-down: #4794da;
    --tchmi-key-background-active: linear-gradient(135deg, #eff1f3, #aeb9c2);
    --tchmi-key-color-active: #4794da;
    --tchmi-input-background: white;
}

.TcHmi_Controls_Beckhoff_TcHmiKeyboard,
.tchmi-keyboard {
    background-color: var(--tchmi-background);
}

.TcHmi_Controls_Beckhoff_TcHmiKeyboard-template-key,
.tchmi-keyboard-template-key {
    background: var(--tchmi-key-background);
    color: var(--tchmi-key-color);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.6);
}

/* tchmibutton, not disabled, not operate-disallowed, mouse over, mousedown on it and still pressed */
.TcHmi_Controls_Beckhoff_TcHmiKeyboard:not(.TcHmi_Controls_System_TcHmiControl-disabled):not(
        .TcHmi_Controls_System_TcHmiControl-operate-disallowed
    )
    .TcHmi_Controls_Beckhoff_TcHmiKeyboard-template-key.hover.down,
.TcHmi_Controls_Beckhoff_TcHmiKeyboard-template-additional-keys-container
    .TcHmi_Controls_Beckhoff_TcHmiKeyboard-template-key.hover.down,
.TcHmi_Controls_Beckhoff_TcHmiKeyboard:not(.TcHmi_Controls_System_TcHmiControl-disabled):not(
        .TcHmi_Controls_System_TcHmiControl-operate-disallowed
    )
    .TcHmi_Controls_Beckhoff_TcHmiKeyboard-template-key.down
    .TcHmi_Controls_Beckhoff_TcHmiKeyboard-template-key.additional-key.hover,
.TcHmi_Controls_Beckhoff_TcHmiKeyboard-template-key.show-additional-keys,
.tchmi-keyboard:not(.tchmi-control-disabled):not(.tchmi-control-operate-disallowed)
    .tchmi-keyboard-template-key.hover.down,
.tchmi-keyboard:not(.tchmi-control-disabled):not(.tchmi-control-operate-disallowed)
    .tchmi-keyboard-template-key.down
    .tchmi-keyboard-template-key.additional-key.hover,
.tchmi-keyboard-template-key.show-additional-keys {
    background: var(--tchmi-key-background-down);
    color: var(--tchmi-key-color-down);
    box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
}

.TcHmi_Controls_Beckhoff_TcHmiKeyboard-template-key.active,
.tchmi-keyboard-template-key.active {
    background: var(--tchmi-key-background-active);
    color: var(--tchmi-key-color-active);
    box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.4);
}

.TcHmi_Controls_Beckhoff_TcHmiKeyboard-template-backdrop,
.tchmi-keyboard-template-backdrop {
    background-color: var(--tchmi-backdrop-background);
}

.TcHmi_Controls_Beckhoff_TcHmiKeyboard-template-label svg,
.tchmi-keyboard-template-label svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.1px;
}

.TcHmi_Controls_Beckhoff_TcHmiKeyboard-template-textbox {
    border: none;
    box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.02), inset 0px 0px 3px 2px rgba(0, 0, 0, 0.3);
    color: var(--tchmi-color);
    background: var(--tchmi-input-background);
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    resize: none;
}
.TcHmi_Controls_Beckhoff_TcHmiKeyboard-template-textbox:focus {
    /* A blinking cursor is enough for ourself. The manipulated text element is highlighted. */
    outline: none;
}
