how to set selected row opacity in vaadin-grid

Flow
1

Trying to change the opacity of the selected row in vaadin-grid. Below is what I have tried.

<dom-module id="vaadin-grid-theme" theme-for="vaadin-grid">
  <template>
    <style>

<!-- this works for selected/hover/un-selected-->
      :host [part~="body-cell"]
::before {
        background-color: var(--secondary-color);
      }

<!-- this does not work-->
     :host vaadin-grid#material{
      --vaadin-grid-body-row-selected-cell: {
            opacity: 1;
            background-color: rgba(0, 0, 0, 1);
        };
      }

    </style>
  </template>
</dom-module>

I read [this page]
(https://cdn.vaadin.com/vaadin-grid/3.0.0/demo/styling-material.html) but I do not understand the formats displayed in that page. Typically I been using the dom-module with the nested template, style, and :host as displayed in my example. Any ideas on what I am doing wrong?

EDIT: I am using Vaadin 14.

2

Found out how to do it. Here it is, in case anyone else needs the same.

<dom-module id="grid-header" theme-for="vaadin-grid">
  <template>
    <style>
        :host(:not([reordering]
)) [part~="row"]
[selected]
 [part~="body-cell"]
:not([part~="details-cell"]
) {
                background-color: rgba(0, 0, 0, .50);
        }
    </style>
  </template>
</dom-module>