@layer components {
  .table {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
  }

  .table th,
  .table td {
    padding: var(--table-cell-padding);
    text-align: start;
    vertical-align: top;
  }

  .table th {
    font-weight: 600;
    color: var(--color-ink-subtle);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    background-color: var(--color-canvas-alt);
    border-block-end: 1px solid var(--color-border-strong);
  }

  .table td {
    border-block-end: 1px solid var(--color-border);
  }

  .table tbody tr:last-child td {
    border-block-end: none;
  }

  /* Hover state */
  .table--hover tbody tr {
    transition: background-color var(--duration-fast) var(--ease-out);

    @media (any-hover: hover) {
      &:hover {
        background-color: var(--color-canvas-alt);
      }
    }
  }

  /* Striped variant */
  .table--striped tbody tr:nth-child(even) {
    background-color: oklch(var(--lch-canvas-alt) / 50%);
  }

  /* Compact variant */
  .table--compact th,
  .table--compact td {
    padding: var(--block-space-half) var(--inline-space-half);
  }

  /* Bordered variant */
  .table--bordered {
    border: 1px solid var(--color-border);
    border-radius: var(--input-radius);
    overflow: hidden;

    & th,
    & td {
      border-inline-end: 1px solid var(--color-border);

      &:last-child {
        border-inline-end: none;
      }
    }
  }

  /* Responsive wrapper */
  .table-responsive {
    inline-size: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Cell alignment */
  .table .txt-end {
    text-align: end;
  }

  .table .txt-center {
    text-align: center;
  }

  /* Cell width control */
  .table .col-shrink {
    inline-size: 1px;
    white-space: nowrap;
  }

  /* Logo cell */
  .table__logo {
    inline-size: 64px;

    & img {
      max-block-size: 32px;
      max-inline-size: 64px;
      object-fit: contain;
    }
  }

  /* Empty state */
  .table__empty {
    text-align: center;
    color: var(--color-ink-muted);
    padding: var(--block-space-double) var(--inline-space);
  }
}