import { html, LitElement, css } from "lit";
import { customElement } from "lit/decorators.js";
const tagName = "sonic-tbody";

@customElement(tagName)
export class TableTbody extends LitElement {
  static styles = [
    css`
      :host {
        display: table-row-group;
      }

      ::slotted(sonic-tr:nth-child(odd)) {
        background: var(--sc-table-accent-bg);
      }

      ::slotted(sonic-tr:hover) {
        background: var(--sc-table-hover-bg);
      }

      ::slotted(sonic-tr:not(:last-child)) {
        border-bottom: var(--sc-form-border-width) solid
          var(--sc-base-200, rgba(0, 0, 0, 0.12)) !important;
      }
    `,
  ];

  render() {
    return html`<tbody part="tbody">
      <slot></slot>
    </tbody>`;
  }
}