@use '../../base/token';
@use '../../base/variable';
@use '../../abstract';

.cds-large-table {
  max-width: variable.$max-width;
  margin-inline: auto;

  &__inner {
    display: table;
    color: var(--gray-500);
    grid-column: gap-end / end-gap-start;
  }

  table {
    width: 100%;
    font-size: var(--font-size-1);
  }

  th {
    color: var(--gray-700);
  }

  &__header {
    padding-block-end: 24px;
    font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-2);
    font-size: 20px;
    line-height: 32px;
    text-align: center;
    border-block-end: 1px solid var(--gray-200);
  }

  tbody tr:nth-child(odd) {
    background-color: var(--gray-50);
  }

  tbody th,
  td {
    padding-block: 21px;
  }

  tbody th {
    padding-inline-start: 24px;
    font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-1);
  }

  td {
    text-align: center;
    height: 64px;
    line-height: 24px;
    vertical-align: middle;
    padding: 0 24px;
    font-size: 14px;
  }

  &__th {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
  }

  tbody tr:last-child th,
  tbody tr:last-child td {
    border-block-end: 1px solid var(--gray-200);
  }

  .cds-large-table__btn {
    padding: 40px 24px 32px;
  }

  &__caption {
    display: table-caption;
    padding-inline-start: 24px;
    padding-block-end: 16px;
    color: var(--secondary-gray-blue-450);
    font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-2);

    .cds-btn {
      margin-inline-start: 12px;
      font-size: 14px !important;
      text-decoration: underline;
      vertical-align: text-top;
    }
  }

  &__content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
  }

  &__content-data {
    order: 2;
  }
}