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

.cds-board-list {
  .cds-board-table {
    th {
      text-align: center;
    }

    .cds-table__row:last-child {
      border-block-end: 1px solid var(--gray-100);
    }

    .cds-table__cell:nth-child(2) {
      margin-bottom: 0;
    }

    .cds-table__cell.empty-text {
      height: 400px;
      text-align: center;
    }

    &__title {
      display: flex;
      gap: 4px;
      align-items: center;

      &.is-top .cds-board-table__title-text {
        font-weight: 700;
        color: var(--gray-700);
      }
    }

    .cds-badge {
      margin-inline-end: 2px;
    }

    &__title-text {
      cursor: pointer;
      color: var(--gray-700);
    }

    &__file-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      margin-top: 1px;
      border-radius: 4px;
      background: var(--gray-100);
    }

    &__new-icon {
      height: 20px;
      margin-top: 1px;
    }
  }
}

@media (max-width: 768px) {
  .cds-board-list {
    .cds-board-table {
      .cds-table__row:first-child {
        border-block-start: 1px solid var(--gray-100);
      }

      .cds-table__cell:nth-child(2) {
        margin-bottom: 8px;
      }

      .cds-table__cell.empty-text {
        height: 300px;
      }

      &__category {
        font-size: var(--font-size-0);
        color: var(--gray-400);
        font-weight: 500;
      }

      .cds-badge {
        vertical-align: middle;
      }

      &__title {
        display: block;
      }

      &__title-text {
        font-weight: 500;
        vertical-align: middle;
        font-size: var(--font-size-2);
      }

      .cds-badge + .cds-board-table__title-text {
        margin-left: 4px;
      }

      &__date {
        font-size: var(--font-size-0);
      }

      &__file-icon {
        display: inline-block;
        vertical-align: middle;
        margin-block-start: 0;
        margin-inline-start: 4px;
        padding-inline-start: 3px;
        padding-block-start: 1px;
      }

      &__new-icon {
        display: inline-block;
        vertical-align: middle;
        margin-top: 0;
        margin-left: 4px;
      }
    }
  }
}