.table-header-cell {
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  border-color: var(--color-border-separator);
  border-bottom-style: solid;
  border-width: 0 0 var(--size-border-xs) 0;
  background-color: var(--color-background-primary);
  color: var(--color-text-body-secondary);
  font-size: var(--size-font-xs);
  font-weight: var(--size-font-weight-bold);
  padding: var(--size-spacing-md) var(--size-spacing-lg);

  &.sortable {
    cursor: pointer;
  }

  &.borderless {
    border-width: 0;
  }

  &.truncated {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  &.compact {
    padding: var(--size-spacing-xs) var(--size-spacing-xs);
  }

  &.sticky-header {
    position: sticky;
    top: 0;
    z-index: var(--size-z-index-sticky);
  }

  &.sticky-column-left {
    left: 0;
  }

  &.sticky-column-right {
    right: 0;
  }

  &.sticky-column {
    position: sticky;
    z-index: calc(var(--size-z-index-sticky) + 1);
    box-shadow: 5px 0 5px -2px rgb(0 0 0 / 10%),
      -5px 0 5px -2px rgb(0 0 0 / 10%);
    background-color: var(--color-background-primary);
  }

  &.align-right {
    text-align: right;
  }

  &.align-center {
    text-align: center;
  }

  .heading {
    white-space: nowrap;

    .sort-icon {
      margin-left: var(--size-spacing-xs);
    }
  }
}
