/* =========================
   Tables
   Figma: Tables / Data grid.
========================= */

@use "../kit-deps" as *;

.table-container {
  width: 100%;
  overflow-x: auto;
  border: $border-width-base $border-style-base $border-color-muted;
  border-radius: $radius-md;
  background-color: $surface-panel-muted;
}

.table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.4;

  caption {
    padding: $space-3 $space-4;
    text-align: left;
    font-weight: $font-weight-semibold;
    color: $neutral-700;
  }

  th,
  td {
    padding: $space-3 $space-4;
    text-align: left;
    vertical-align: middle;
    border-bottom: $border-width-base $border-style-base $border-color-muted;
  }

  thead th {
    background-color: $neutral-100;
    color: $neutral-700;
    font-weight: $font-weight-semibold;
    font-size: 13px;
    text-transform: none;
    letter-spacing: 0;
    border-bottom: $border-width-base $border-style-base $neutral-200;
  }

  tbody tr {
    transition: background-color $motion-base $motion-ease;

    &:hover {
      background-color: rgba($neutral-900, 0.03);
    }

    &:last-child td {
      border-bottom: 0;
    }
  }

  tfoot td {
    background-color: $neutral-100;
    font-weight: $font-weight-semibold;
    border-top: $border-width-base $border-style-base $neutral-200;
  }
}

.table-compact {
  th,
  td {
    padding: $space-2 $space-3;
    font-size: 13px;
  }
}

.table-striped {
  tbody tr:nth-child(even) {
    background-color: rgba($neutral-900, 0.015);

    &:hover {
      background-color: rgba($neutral-900, 0.04);
    }
  }
}

.table-selectable {
  tbody tr {
    cursor: pointer;

    &.is-selected {
      background-color: rgba($mint-500, 0.12);

      &:hover {
        background-color: rgba($mint-500, 0.18);
      }
    }
  }
}