/* Floating on-screen keyboard window (virtual-keyboard.js): a draggable header, the simple-keyboard keys and a resize
   handle. Left, top, width and height are set by the script. Colors come from the MudBlazor palette so both themes apply. */
.virtual-keyboard {
    position: fixed;
    z-index: calc(var(--mud-zindex-dialog, 1400) + 10);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 0 0.4rem 1.3rem;
    container-type: size;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 0.6rem;
    background: var(--mud-palette-surface);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    -webkit-user-select: none;
    user-select: none;
}

.virtual-keyboard[hidden] {
    display: none;
}

.vk-header {
    display: flex;
    flex: none;
    align-items: stretch;
    height: 1.8rem;
    margin: 0 -0.4rem 0.3rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    cursor: grab;
    touch-action: none;
}

.vk-grip {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
}

.vk-grip::before {
    content: '';
    width: 3rem;
    height: 0.25rem;
    border-radius: 0.125rem;
    background: var(--mud-palette-text-secondary);
    opacity: 0.6;
}

.vk-close {
    width: 2.4rem;
    border: 0;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font-size: 1rem;
    cursor: pointer;
}

.vk-resize {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 1.6rem;
    height: 1.6rem;
    cursor: nwse-resize;
    touch-action: none;
}

.vk-resize::after {
    content: '';
    position: absolute;
    right: 0.3rem;
    bottom: 0.3rem;
    width: 0.8rem;
    height: 0.8rem;
    background: repeating-linear-gradient(135deg, transparent 0 0.2rem, var(--mud-palette-text-secondary) 0.2rem 0.28rem);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    opacity: 0.7;
}

.vk-keys.hg-theme-default {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    width: auto;
    padding: 0;
    border-radius: 0;
    background: transparent;
    font-family: inherit;
}

.vk-keys.hg-theme-default .hg-rows {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

.vk-keys.hg-theme-default .hg-row {
    flex: 1;
    min-height: 0;
}

.vk-keys.hg-theme-default .hg-row:not(:last-child) {
    margin-bottom: 0.3rem;
}

.vk-keys.hg-theme-default .hg-button {
    height: auto;
    font-size: clamp(0.8rem, min(calc((100cqh - 4rem) * 0.075), 3.4cqw), 2.4rem);
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: none;
}

.vk-keys.hg-theme-default.hg-layout-num .hg-button {
    font-size: clamp(0.8rem, min(calc((100cqh - 4rem) * 0.075), 9cqw), 2.4rem);
}

.vk-keys.hg-theme-default .hg-button.hg-activeButton {
    background: var(--mud-palette-action-default-hover);
}

.vk-keys.hg-theme-default .hg-button.vk-on {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.vk-keys.hg-theme-default .hg-button.hg-button-space {
    flex-grow: 6;
}

.vk-keys.hg-theme-default:not(.hg-layout-num) .hg-button.hg-button-bksp,
.vk-keys.hg-theme-default:not(.hg-layout-num) .hg-button.hg-button-enter,
.vk-keys.hg-theme-default:not(.hg-layout-num) .hg-button.hg-button-shift,
.vk-keys.hg-theme-default:not(.hg-layout-num) .hg-button.hg-button-lock,
.vk-keys.hg-theme-default:not(.hg-layout-num) .hg-button.hg-button-lang,
.vk-keys.hg-theme-default:not(.hg-layout-num) .hg-button.hg-button-mode {
    flex-grow: 1.6;
}

.vk-keys.hg-theme-default.hg-layout-num .hg-button.hg-button-enter {
    flex-grow: 2;
}