@layer components {
  .rs-table-wrap {
    overflow: auto;
    border: 1px solid var(--rs-color-border-neutral-faded);
    border-radius: var(--rs-radius-medium);
    background: var(--rs-color-background-elevation-base);
  }

  .rs-table-wrap[data-fade-end] {
    --rs-scroll-fade-end: 1;
    mask-image:
      linear-gradient(to right, white, white),
      linear-gradient(
        to right,
        white,
        transparent calc(var(--rs-scroll-fade-start, 0) * var(--rs-scroll-fade-size)),
        transparent calc(100% - var(--rs-scroll-fade-end, 0) * var(--rs-scroll-fade-size)),
        white
      );
    mask-composite: exclude;
    mask-position: center, left;
    mask-repeat: no-repeat;
    mask-size: 100% 100%, 100% 100%;
  }

  @supports (animation-timeline: scroll()) {
    .rs-table-wrap[data-fade-end] {
      animation-name: rs-scroll-fade-start, rs-scroll-fade-end;
      animation-timing-function: linear, linear;
      animation-timeline: scroll(self x);
      animation-range:
        0 var(--rs-scroll-fade-range),
        calc(100% - var(--rs-scroll-fade-range)) 100%;
      animation-fill-mode: both;
    }
  }

  .rs-table {
    inline-size: 100%;
    min-inline-size: 100%;
    border-collapse: separate;
    border-spacing: 0;
  }

  .rs-table :is(th, td) {
    padding: var(--rs-unit-x3) var(--rs-unit-x4);
    border-block-start: 1px solid var(--rs-color-border-neutral-faded);
    text-align: start;
    vertical-align: top;
  }

  .rs-table thead :is(th, td) {
    border-block-start: 0;
    color: var(--rs-color-foreground-neutral-faded);
    font-size: var(--rs-font-size-caption-1);
    font-weight: var(--rs-font-weight-semibold);
    line-height: var(--rs-line-height-caption-1);
  }

  .rs-table tbody tr:first-child :is(th, td) {
    border-block-start: 1px solid var(--rs-color-border-neutral-faded);
  }

  .rs-table tbody tr {
    transition: background-color var(--rs-duration-fast)
      var(--rs-easing-standard);
  }

  @media (hover: hover) and (pointer: fine) {
    .rs-table tbody tr:hover {
      background: color-mix(
        in oklch,
        var(--rs-color-background-neutral),
        transparent 78%
      );
    }
  }

  .rs-table tbody tr[data-highlighted] {
    background: color-mix(
      in oklch,
      var(--rs-color-background-neutral),
      transparent 76%
    );
  }

  .rs-table tbody tr[tabindex] {
    cursor: pointer;
  }

  .rs-table tbody tr[tabindex]:focus-visible {
    position: relative;
    z-index: var(--rs-z-index-relative);
    outline: 0;
    box-shadow: var(--rs-shadow-focus-inset);
  }
}