tabler/core/scss/ui/_tables.scss

@use '../config' as *;

.table {
  font: inherit;

  @include media-print() {
    thead {
      display: table-header-group;
    }

    tr {
      break-inside: avoid;
    }
  }

  thead {
    th {
      padding-top: $table-th-padding-y;
      padding-bottom: $table-th-padding-y;
      white-space: nowrap;
      background: $table-th-bg;
      @include subheader();

      @include media-print() {
        background: transparent;
      }
    }
  }
}

.table-responsive {
  .table {
    margin-bottom: 0;
  }
}

.table-transparent {
  thead {
    th {
      background: transparent;
    }
  }
}

// Matches Bootstrap's own `.table > :not(caption) > * > *` idiom for targeting every
// cell regardless of thead/tbody/tfoot wrapping.
// stylelint-disable selector-max-universal
.table-nowrap {
  > :not(caption) > * > * {
    white-space: nowrap;
  }
}

.table-vcenter {
  > :not(caption) > * > * {
    vertical-align: middle;
  }
}

.table-center {
  > :not(caption) > * > * {
    text-align: center;
  }
}
// stylelint-enable selector-max-universal

.td-truncate {
  width: 100%;
  max-width: 1px;
}

.table-mobile {
  @each $breakpoint, $breakpoint-max-widthin in $grid-breakpoints {
    &#{breakpoint-infix($breakpoint)} {
      @include media-breakpoint-down($breakpoint) {
        display: block;

        thead {
          display: none;
        }

        tbody,
        tr {
          display: flex;
          flex-direction: column;
        }

        td {
          display: block;
          padding: $table-cell-padding-y $table-cell-padding-x !important;
          color: var(--body-color) !important;
          border: none;

          &[data-label] {
            &::before {
              @include subheader();
              display: block;
              content: attr(data-label);
            }
          }
        }

        tr {
          border-bottom: var(--border-width) var(--border-style) $table-border-color;
        }

        .btn {
          display: block;
        }
      }
    }
  }
}

// Table sort
.table-sort {
  --table-sort-icon-size: #{$table-sort-icon-size};
  --table-sort-icon-margin-start: #{$table-sort-icon-margin-start};
  display: block;
  width: 100%;
  padding: $table-th-padding-y $table-th-padding-x;
  margin: calc(-1 * $table-th-padding-y) calc(-1 * $table-th-padding-x);

  font: inherit;
  color: inherit;
  text-align: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  background: inherit;
  border: 0;
  @include transition(color $transition-time);

  &:hover,
  &.asc,
  &.desc {
    color: var(--body-color);
  }

  &::after {
    display: inline-flex;
    width: var(--table-sort-icon-size);
    height: var(--table-sort-icon-size);
    margin-inline-start: var(--table-sort-icon-margin-start);
    vertical-align: bottom;
    content: '';
    background: currentColor;
    mask-image: $table-sort-bg-image;
  }

  &.asc::after {
    mask-image: $table-sort-asc-bg-image;
  }

  &.desc::after {
    mask-image: $table-sort-desc-bg-image;
  }
}

.table-borderless {
  thead th {
    background: transparent;
  }
}

//
// Table selectable
//
.table-selectable {
  tbody tr {
    .on-checked {
      display: none;
    }

    .on-unchecked {
      display: initial;
    }

    &:has(.table-selectable-check:checked) {
      background-color: $table-active-bg;

      .on-checked {
        display: initial;
      }

      .on-unchecked {
        display: none;
      }
    }
  }
}