/* Reusable table grid component (Figma Table_Grid / Table_Boxes). */

.table-grid-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-grid {
  width: 100%;
  min-width: 560px;
  border-collapse: separate;
  border-spacing: 4px;
  table-layout: fixed;
  direction: rtl;
}

.table-grid caption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.table-grid th,
.table-grid td {
  min-height: 35px;
  padding: 7px var(--padding);
  border: 1px solid var(--color-light-grey);
  border-radius: var(--radius-card);
  background: var(--color-bg);
  color: var(--color-black);
  font-size: var(--font-body);
  font-weight: 400;
  line-height: normal;
  text-align: center;
  vertical-align: middle;
  transition: border-color 0.22s ease;
}

.table-grid thead th {
  background: var(--color-light-grey);
}

.table-grid tbody th {
  background: var(--color-cyan-light);
  text-align: right;
}

.table-grid tfoot th,
.table-grid tfoot td,
.table-grid tr.table-grid__row--total > th,
.table-grid tr.table-grid__row--total > td {
  background: var(--color-green);
  text-align: center;
}

.table-grid tr.table-grid__row--total > th {
  text-align: right;
}

.table-grid tbody tr:hover > *,
.table-grid tbody tr:focus > *,
.table-grid tbody tr:focus-visible > * {
  border-color: var(--color-cyan);
}

.table-grid tbody tr:focus,
.table-grid tbody tr:focus-visible {
  outline: none;
}

.table-grid tbody tr:focus-visible > *:first-child {
  outline: 2px solid var(--color-cyan);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .table-grid {
    min-width: 520px;
  }

  .table-grid th,
  .table-grid td {
    padding-inline: 12px;
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .table-grid th,
  .table-grid td {
    transition: none;
  }
}