/* stylelint-disable @morev/bem/no-side-effects -- exception */

.cart-table {
  $block: #{&};

  @include flex(column, nowrap, $whitespace-7);

  /* stylelint-disable-next-line @morev/bem/no-block-properties -- Exception */
  flex: 1;

  &__heading {
    font-size: $font-size-7;
  }

  &__table {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: 0 $whitespace-9;
    white-space: nowrap;
    border: 0;

    @include media-down(laptop) {
      display: none;
    }

    thead,
    tbody {
      display: contents;
    }

    tr {
      display: grid;
      grid-template-columns: subgrid;
      grid-column: 1 / -1;
      align-items: center;
    }

    thead {
      border-block: 0.2rem solid $color-neutral-4;
    }

    tbody tr:nth-child(even),
    tbody tr:nth-child(odd) {
      background-color: $color-neutral-1;
    }

    tbody td {
      padding-block: $whitespace-5;
    }

    th,
    td {
      padding-inline: 0;
    }

    th {
      padding-block: $whitespace-6;
      text-align: start;
      text-transform: none;
    }
  }

  &__cards {
    display: none;

    @include media-down(laptop) {
      @include flex(column, nowrap, $whitespace-8);
    }
  }
}