.virtual-keyboard-component {
  display: flex;
  align-items: center;
  gap: 20px;
  background-color: var(--virtual-keyboard-background-color, #ffffff);
  
  &.virtual-keyboard-component-dark {
    background-color: var(--virtual-keyboard-background-color, rgba(0, 0, 0, 0.70));
  }
  
  &.virtual-keyboard-component-light {
    background-color: var(--virtual-keyboard-background-color, #ffffff);
  }
}

.virtual-keyboard-component-left {
  padding: 10px;
  width: 380px;
  border-radius: 10px;
  background: var(--virtual-keyboard-container-background-color, #D0D5DD);
  backdrop-filter: blur(50px);
  
  .pisell-virtual-keyboard-input {
    background-color: var(--virtual-keyboard-button-background-color, #ffffff);
    color: var(--virtual-keyboard-text-color, #000000);
  }
  
  .pisell-keyboard {
    background-color: var(--virtual-keyboard-keyboard-background-color, #f9f9f9);
    
    .pisell-keyboard-item {
      background-color: var(--virtual-keyboard-keyboard-button-background-color, #ffffff);
      color: var(--virtual-keyboard-keyboard-button-text-color, #000000);
      
      &:hover {
        background-color: var(--virtual-keyboard-keyboard-button-hover-color, #f5f5f5);
      }
      
      &.pisell-keyboard-item-primary {
        background-color: var(--virtual-keyboard-primary-button-background-color, #4ca30d);
        color: var(--virtual-keyboard-primary-button-text-color, #ffffff);
      }
    }
  }
}

.virtual-keyboard-component-right {
  align-self: stretch;
}