.x-table {
  :where(tbody:first-child, tfoot:first-child) {
    :where(tr:first-child) {
      &,
      :where(th,td):where(:first-child) {
        border-start-start-radius: var(--x-table-border-radius);
      }

      &,
      :where(th,td):where(:last-child) {
        border-start-end-radius: var(--x-table-border-radius);
      }
    }
  }

  :where(tbody:last-child, tfoot:last-child) {
    :where(tr:last-child) {
      &,
      :where(th,td):where(:first-child) {
        border-end-start-radius: var(--x-table-border-radius);
      }

      &,
      :where(th,td):where(:last-child) {
        border-end-end-radius: var(--x-table-border-radius);
      }
    }
  }

  :where(tr, th, td):where([tabindex="0"]),
  :where(.outline) {
    transition: var(--transition-all);
    outline: var(--x-table-outline-width, 1px) solid transparent;
    outline-offset: calc(var(--x-table-outline-width, 1px) * -1);

    &:is(:hover, :focus-visible, .active) {
      background-color:
        color-mix(
          in var(--x-table-outline-background-color-space, srgb),
          var(--x-table-outline-accent-color, var(--color-accent)) var(--x-table-outline-background-color-opacity, 5%),
          var(--x-table-outline-background-color-mix, transparent)
        );
      outline-color: var(--x-table-outline-accent-color, var(--color-accent));
    }
  }
}