@layer components {
  .table {
    --table__inline-padding: var(--space-md);

    position: relative;
    width: calc(100% + 2 * var(--table__inline-padding));
    translate: calc(-1 * var(--table__inline-padding));
    overflow-x: clip;

    &::before,
    &::after {
      content: "";
      position: absolute;
      height: 100%;
      width: var(--table__inline-padding);
      inset-block: 0;
      z-index: var(--z-1);
      pointer-events: none;
    }

    &::before {
      left: 0;
      background: linear-gradient(to right, var(--color-white), transparent);
    }

    &::after {
      right: 0;
      background: linear-gradient(to left, var(--color-white), transparent);
    }
  }

  .table__table-scroll-wrapper {
    padding-inline: var(--table__inline-padding);
    overflow-x: auto;
  }

  /* On wider viewports the table fits within the container, so the scroll
     wrapper can stop being a scroll container. That lets the sticky header
     use the viewport as its scroll container. Horizontal scrolling remains
     available below this breakpoint, where the table may overflow. */
  @media (width >= 64rem) {
    .table__table-scroll-wrapper {
      overflow-x: visible;
    }
  }

  .table__table-wrapper {
    margin-inline: auto;
    border-radius: var(--border-radius-2);
    border: var(--color-neutral-1) solid var(--border-width-2);
    overflow: clip;
    width: fit-content;
    min-width: 100%;
    max-width: 100rem;
  }

  .table__table {
    width: 100%;
    border-collapse: collapse;
    border-style: hidden;
    text-wrap: pretty;
    font-size: var(--font-size-sm-x1);
  }

  .table__head-cell {
    padding: var(--space-md);
    vertical-align: middle;
    background-color: var(--color-primary-0);
    line-height: var(--line-height-tighter);
    text-align: left;
    font-weight: var(--font-weight-semi-bold);
    color: var(--color-primary-7);
    font-size: var(--font-size-sm-x1);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: var(--z-1);
  }

  .table__row {
    background-color: var(--color-white);
  }

  .table__cell {
    border-block: var(--color-neutral-1) solid var(--border-width-1);
    padding: var(--space-sm-x2) var(--space-md);
    vertical-align: middle;
    font-size: var(--font-size-sm-x1);
    overflow-wrap: break-word;
  }

  .table__cell--bold {
    font-weight: var(--font-weight-semi-bold);
  }

  .table__cell-symbol,
  .table__cell-unit {
    font-size: var(--font-size-sm-x2);
    color: var(--color-neutral-4);
  }

  .table__cell-symbol {
    margin-inline-end: var(--space-sm-x4);
  }

  .table__cell-unit {
    margin-inline-start: var(--space-sm-x4);
  }

  .table__actions {
    font-size: var(--font-size-sm-x1);
  }

  .table__action {
    a {
      display: inline-block;
      color: var(--color-primary-7);
      margin-block-start: var(--space-sm-x4);
      border-radius: var(--border-radius-2);

      &:hover {
        text-decoration: underline;
      }
    }
  }

  /* --- Media queries (smallest → largest) --- */

  /* break-sm-x1: 40rem (640px) */
  @media (width >= 40rem) {
  }

  /* break-md: 48rem (768px) */
  @media (width >= 48rem) {
  }

  /* break-lg-x1: 64rem (1024px) */
  @media (width >= 64rem) {
  }

  /* break-lg-x2: 80rem (1280px) */
  @media (width >= 80rem) {
  }
}