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

.cds-table {
  //   @include abstract.debug;
  $this: &;
  font-size: token.$font-size-1;
  color: var(--gray-400);

  table {
    width: 100%;
    table-layout: fixed;
  }

  th {
    display: none;
  }

  &__row {
    @include abstract.relative();

    display: block;
    padding: 16px 24px;

    &:nth-child(n + 2) {
      border-block-start: 1px solid var(--gray-100);
    }

    &:hover {
      background-color: var(--gray-50);
    }

    &.is-disable {
      background-color: var(--gray-100);
    }
  }

  &__cell {
    display: block;

    &:nth-child(1) {
      margin-bottom: 4px;
    }
    &:nth-child(2) {
      margin-bottom: 8px;
    }
  }

  &__cell--bold {
    color: var(--gray-700);
    font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-1);
  }

  :where(.is-disable) td {
    color: var(--gray-300);

    & > * {
      pointer-events: none;
    }

    #{$this}__dot {
      background-color: var(--gray-300);
    }
  }

  //   &__cell: first-child;

  @include abstract.media-bp-up('md') {
    th {
      display: table-cell;
      padding: 13px 24px;
      background-color: var(--gray-50);
      border-bottom: 1px solid var(--gray-100);
      color: var(--gray-500);
      font-size: token.$font-size-0;
      font-weight: 500;
    }

    &__row {
      display: table-row;
    }

    &__cell {
      display: table-cell;
      padding-inline: 24px 10px;
      height: 72px;
      vertical-align: middle;
    }

    :where(.is-disable td) {
      background-color: var(--gray-100);
      color: var(--gray-300);
    }
  }
}