@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';
@import 'bootstrap/scss/mixins/breakpoints';

tr {
  border-color: inherit;
  border-style: solid;
  border-width: 0;
  display: flex;
  align-items: stretch;
}

tr cod-table-cell,
tr cod-table-cell-header {
  flex: 1;
}

tr cod-table-cell[colspan='2'],
tr cod-table-cell-header[colspan='2'] {
  flex: 2;
}

tr cod-table-cell[colspan='3'],
tr cod-table-cell-header[colspan='3'] {
  flex: 3;
}

tr cod-table-cell[colspan='4'],
tr cod-table-cell-header[colspan='4'] {
  flex: 4;
}

tr cod-table-cell[colspan='5'],
tr cod-table-cell-header[colspan='5'] {
  flex: 5;
}

tr.table-hover:hover {
  --cod-table-accent-bg: var(--cod-table-hover-bg);
}

@include media-breakpoint-down(lg) {
  tr.table-stacked {
    display: block;
    border-top-width: 0;
    width: 100%;

    &:not(.cell-header-block) {
      border-bottom: 2px solid var(--cod-black);
    }

    &.first:not(.cell-header-block) {
      border-top: 2px solid var(--cod-black);
    }

    &.odd.cell-header-block {
      border-left: 2px solid var(--cod-black);
    }
  }
}