:host {
  --background-fixed: var(--supreme-waffle-color-base-white);
  --border: var(--supreme-waffle-border-default);
  --box-shadow: 3px 3px 6px -2px rgba(0, 0, 0, 0.1);
  --color-sorting: var(--supreme-waffle-color-neutral-charcoal-500);
  --color: var(--supreme-waffle-color-neutral-charcoal-200);
  --fixed-cell-position: 0;
  --font-size: var(--supreme-waffle-font-size-body-sm);
  --font-weight: var(--supreme-waffle-font-weight-medium);
  --line-height: var(--supreme-waffle-line-height-sm);
  --margin-arrow: var(--supreme-waffle-spacing-xxs);
  --padding-arrow: calc(var(--supreme-waffle-spacing-xxs) / 2);
  --padding-compact: var(--supreme-waffle-spacing-xxs);
  --padding: calc(var(--supreme-waffle-spacing-md) / 2);
  border-block-end: var(--border);
  color: var(--color);
  display: table-cell;
  font-size: var(--font-size);
  font-style: normal;
  font-weight: var(--font-weight);
  line-height: var(--line-height);
  padding: var(--padding);
  text-align: start;
  vertical-align: inherit;
}

:host(.is-compact) {
  padding-block: var(--padding-compact);
}

:host(.is-fixed) {
  background: var(--background-fixed);
  left: var(--fixed-cell-position);
  position: sticky;
  z-index: 1;
}

:host(.has-scrolled.is-fixed) {
  box-shadow: var(--box-shadow);
}

:host(.is-sortable) {
  cursor: pointer;
}
:host(.is-sortable) pds-icon {
  margin-inline-start: var(--margin-arrow);
  padding-block-start: var(--padding-arrow);
  position: absolute;
}

:host(.is-sortable:hover),
:host(.is-active) {
  color: var(--color-sorting);
}