table {
  border: 1px solid var(--grey-300);
  border-collapse: collapse;
  margin: 0 auto;

  th {
    background-color: var(--blue-600);
    color: var(--white);
    line-height: 1.25;
    text-align: center;
    vertical-align: middle;
  }

  th,
  td {
    border: 1px solid var(--grey-300);
    padding: 0.5rem;

    [data-theme='dark'] & {
      border-color: var(--phosphor-green-medium);
    }
  }

  td {
    vertical-align: top;
    word-break: break-word;
  }

  tbody tr:nth-of-type(even) {
    background-color: var(--grey-100);
  }

  @container type (max-width: 60ch) {
    border: none;

    &,
    thead,
    tbody,
    th,
    td,
    tr {
      display: block;
    }

    thead tr {
      clip-path: inset(50%);
      height: 1px;
      overflow: hidden;
      position: absolute;
      white-space: nowrap;
      width: 1px;
    }

    tbody tr {
      background: var(--white);
      border: 1px solid var(--grey-300);
      margin-bottom: 1rem;

      &:nth-of-type(2n) {
        background: var(--white);
      }
    }

    td {
      border: 0;
      display: grid;
      margin: 0;
      padding: 1rem;

      &:not(:last-child) {
        border-bottom: 1px solid var(--grey-300);
      }

      &::before {
        background-color: var(--blue-600);
        color: var(--white);
        grid-row: 1 / span 1;
      }

      &[data-header] {
        /* stylelint-disable selector-no-qualifying-type */
        &::before {
          align-items: center;
          content: attr(data-header);
          display: flex;
          font-weight: $font-weight-bold;
          margin: -1rem -1rem 1rem;
          padding: 0.5rem 1rem;
        }
        /* stylelint-enable selector-no-qualifying-type */
      }
    }
  }

  @container type (min-width: 45ch) {
    td {
      /* stylelint-enable no-descending-specificity */
      grid-template-columns: 8rem 1fr;

      &::before {
        grid-column: 1 / span 1;
        grid-row: span 3;
        margin-right: 0.5rem;
      }

      /* stylelint-disable max-nesting-depth, selector-no-qualifying-type */
      &[data-header] {
        &::before {
          margin: -1rem 1rem -1rem -1rem;
        }
      }
      /* stylelint-enable max-nesting-depth, selector-no-qualifying-type */
    }
  }
}

// Stacked - 448px;
// .--2col
// Responsive - 554px
// .rt
