@value breakpoint-md from 'pageflow-scrolled/values/breakpoints.module.css';

.table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  --table-border-color: transparent;
}

.table td {
  min-width: 50px;
  vertical-align: top;
}

.table td:first-child {
  border-right: solid 1px var(--table-border-color);
  padding: 0.5rem 0.5rem 0.5rem 0;
}

@media breakpoint-md {
  .table td:first-child {
    white-space: pre;
  }
}

.table td:first-child div {
  color: var(--label-color);
}

.table td:last-child {
  width: 100%;
  padding: 0.5rem 0 0.5rem 0.5rem;
}

.table td:last-child div {
  color: var(--value-color);
}

.center:not([data-stacked]) td {
  width: 50%;
}

.center td:first-child {
  text-align: right;
}

.center[data-stacked] td {
  text-align: center;
}

.labelColumnAlign-left td:first-child,
.valueColumnAlign-left td:last-child,
.table[data-stacked].singleColumnAlign-left td {
  text-align: left;
}

.labelColumnAlign-center td:first-child,
.valueColumnAlign-center td:last-child,
.table[data-stacked].singleColumnAlign-center td {
  text-align: center;
}

.labelColumnAlign-right td:first-child,
.valueColumnAlign-right td:last-child,
.table[data-stacked].singleColumnAlign-right td {
  text-align: right;
}

.table tr:nth-child(n + 2) td {
  border-top: solid 1px var(--table-border-color);
}

.table[data-stacked] tr td:last-child {
  border-top: solid 1px color-mix(in srgb, transparent, var(--table-border-color));
}

.table[data-stacked] td:first-child {
  border-right: none;
  padding-right: 0;
}

.table[data-stacked] td:last-child {
  padding-left: 0;
}

.selected {
  --table-border-color: color-mix(in srgb, transparent, currentColor);
}

/*
  Hide first column if:
  - the table is not selected and
  - the first column is blank (= the table does not have a first
    column cell that is not blank) and
  - the table is not completely blank (= has a non blank cell)
*/
.table:not(.selected):not(:has(td:not([data-blank]):first-child)):has(td:not([data-blank])) td:first-child {
  display: none;
}

.table:not(.selected):not(:has(td:not([data-blank]):first-child)):has(td:not([data-blank])) td:last-child {
  padding-left: 0;
}
