@layer lotek {
  .lt-table {
    box-sizing: border-box;
    inline-size: 100%;
    border-collapse: collapse;
    font-family: inherit;
    font-size: var(--lt-font-size-m);
    line-height: var(--lt-line-height-default);
    color: var(--lt-color-neutral-text-strong);
    /* Numbers stacked under each other must have the same width per digit,
       or the column cannot be read downwards. */
    font-variant-numeric: tabular-nums;
  }

  .lt-table caption {
    text-align: start;
    font-weight: var(--lt-font-weight-semibold);
    padding-block-end: var(--lt-spacing-2);
  }

  .lt-table th,
  .lt-table td {
    padding: var(
      --lt-table-cell-padding,
      var(--lt-spacing-2) var(--lt-spacing-3)
    );
    text-align: start;
    vertical-align: top;
    border-block-end: 1px solid var(--lt-color-neutral-border-subtle);
  }

  .lt-table thead th {
    font-weight: var(--lt-font-weight-semibold);
    border-block-end: 2px solid var(--lt-color-neutral-border-strong);
  }

  .lt-table tbody tr:last-child th,
  .lt-table tbody tr:last-child td {
    border-block-end: 0;
  }

  .lt-table[data-variant="striped"] tbody tr:nth-child(even) {
    background: var(--lt-color-neutral-surface);
  }

  .lt-table[data-hoverable] tbody tr:hover {
    background: var(--lt-color-accent-surface);
  }

  .lt-table td[data-align="end"],
  .lt-table th[data-align="end"] {
    text-align: end;
  }

  /*
   * A sortable column has a button in the header, and the button fills the
   * cell. The cell gives up its padding and the button takes it over, so
   * the text sits where it would without a button and the whole cell can be
   * pressed. Without that the header got padding from both the cell and the
   * button, and became taller and shifted against the cells below.
   */
  .lt-table th:has(> .lt-table__sort) {
    padding: 0;
  }

  .lt-table__sort {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: var(--lt-spacing-2);
    inline-size: 100%;
    margin: 0;
    padding: var(
      --lt-table-cell-padding,
      var(--lt-spacing-2) var(--lt-spacing-3)
    );
    font: inherit;
    color: inherit;
    text-align: inherit;
    background: none;
    border: 0;
    border-radius: 0;
    /* Can also be a link, when the server sorts without JavaScript. */
    text-decoration: none;
    cursor: pointer;
  }

  .lt-table th[data-align="end"] > .lt-table__sort {
    justify-content: flex-end;
  }

  .lt-table__sort:hover {
    background: var(--lt-color-neutral-surface);
  }

  .lt-table__sort:focus-visible {
    outline: var(--lt-focus-ring);
    outline-offset: -2px;
  }

  /*
   * The arrow is read from `aria-sort` on the cell, not from a class. It is
   * the same attribute the screen reader reads, so what is shown and what is
   * said cannot drift apart. Without the attribute the button shows both
   * arrows, muted, so it is visible that the column can be sorted.
   *
   * The arrow is a mask and not an image, so it takes the text colour and
   * flips with the theme. An empty `content` means it never becomes part of
   * the button's name.
   */
  .lt-table__sort::after {
    content: "";
    flex: none;
    inline-size: var(--lt-spacing-3);
    block-size: var(--lt-spacing-3);
    background-color: var(--lt-color-neutral-text-subtle);
    mask:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1 13 6.5H3zM8 15 3 9.5H13z'/%3E%3C/svg%3E")
      center / contain no-repeat;
  }

  .lt-table th[aria-sort="ascending"] > .lt-table__sort::after {
    background-color: currentColor;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3 14 11H2z'/%3E%3C/svg%3E");
  }

  .lt-table th[aria-sort="descending"] > .lt-table__sort::after {
    background-color: currentColor;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 13 2 5H14z'/%3E%3C/svg%3E");
  }

  /* High contrast: the mode forces the background colour to the surface
     colour, and the arrow would then have become invisible. A system colour
     is left alone, so it is drawn in the system text colour. */
  @media (forced-colors: active) {
    .lt-table__sort::after,
    .lt-table th[aria-sort] > .lt-table__sort::after {
      background-color: CanvasText;
    }
  }

  /* The arrow comes before the text in a right-aligned column, so the text
     ends where the numbers below end. */
  .lt-table th[data-align="end"] > .lt-table__sort::after {
    order: -1;
  }

  /* A table wider than the screen must be scrollable, and that area must be
     reachable with the keyboard. Hence tabindex="0" on the container. */
  .lt-table-scroll {
    overflow-x: auto;
    max-inline-size: 100%;
  }

  .lt-table-scroll:focus-visible {
    outline: var(--lt-focus-ring);
    outline-offset: 2px;
  }
}