.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-left {
      border: 1px solid rgba(135, 157, 210, 0.12);
    }

    .virtual-keyboard-input-wrap {
      border: 1px solid rgba(135, 157, 210, 0.14);
      box-shadow: none;

      .virtual-keyboard-input-delete {
        border-left: 1px solid rgba(135, 157, 210, 0.14);
      }
    }

    .virtual-keyboard-wrap {
      .virtual-keyboard-item {
        box-shadow: none;

        .virtual-keyboard-item-button {
          border-color: rgba(135, 157, 210, 0.14) !important;
          box-shadow: none !important;
        }
      }
    }
  }
  
  &.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);
  
  .virtual-keyboard-input-wrap {
    background-color: var(--virtual-keyboard-button-background-color, #ffffff) !important;

    .virtual-keyboard-input {
      color: var(--virtual-keyboard-text-color, #000000) !important;
    }

    .virtual-keyboard-input-delete {
      background-color: var(--virtual-keyboard-button-background-color, #ffffff);

      .virtual-keyboard-input-delete-icon {
        color: var(--virtual-keyboard-text-color, #000000);
      }
    }
  }

  .virtual-keyboard-wrap {
    background-color: var(--virtual-keyboard-keyboard-background-color, #f9f9f9);
    
    .virtual-keyboard-item {
      background-color: var(--virtual-keyboard-keyboard-button-background-color, #ffffff);

      .virtual-keyboard-item-button {
        background-color: var(--virtual-keyboard-keyboard-button-background-color, #ffffff);
        border-color: transparent;
        color: var(--virtual-keyboard-keyboard-button-text-color, #000000) !important;
      }
      
      &:hover {
        background-color: var(--virtual-keyboard-keyboard-button-hover-color, #f5f5f5);

        .virtual-keyboard-item-button {
          background-color: var(--virtual-keyboard-keyboard-button-hover-color, #f5f5f5);
        }
      }
      
      .virtual-keyboard-item-button.pisell-lowcode-btn-primary,
      .virtual-keyboard-item-button.ant-btn-primary {
        background-color: var(--virtual-keyboard-primary-button-background-color, #4ca30d);
        color: var(--virtual-keyboard-primary-button-text-color, #ffffff) !important;
      }
    }
  }
}

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