@use '../../../../scss/mixins/table';
@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';
@import 'bootstrap/scss/mixins/breakpoints';

td {
  display: block;
  padding: 0.5rem 0.5rem;
  background-color: var(--cod-table-bg);
  border-bottom: solid var(--cod-border-width) var(--cod-secondary);
  box-shadow: inset 0 0 0 9999px var(--cod-table-accent-bg);
  height: 100%;
}

td.table-striped,
td.table-striped-columns {
  --cod-table-accent-bg: var(--cod-table-striped-bg);
}

td.table-scrollable {
  width: 5em;
}

@include media-breakpoint-down(lg) {
  td.table-stacked.cell-header-block {
    @include table.th-td-stacked-block-styles;
  }

  td.table-stacked:not(.cell-header-block) {
    @include table.th-td-stacked-inline-styles;

    & div.content {
      @include table.cell-content-stacked-inline-styles;
    }
  }

  td[data-label].table-stacked {
    &.cell-header-block {
      @include table.th-td-labeled-stacked-block-styles;
    }

    &:not(.cell-header-block) {
      @include table.th-td-labeled-stacked-inline-styles;
    }
  }
}