@use 'Foundation/scss/scrollbar-chains.odeditor' as chains;

$item-fill: var(--wds-table-list-item-fill, var(--wds-color-fill-dark-tertiary));
$item-fill-active: var(--wds-table-list-item-fill-active, var(--wds-color-fill-dark-tertiary-active));
$item-fill-hover: var(--wds-table-list-item-fill-hover, var(--wds-color-fill-dark-tertiary-hover));
$header-fill: var(--wds-table-list-header-fill, var(--wds-color-fill-surface-raised));
$header-divider-top: var(--wds-table-list-header-divider-fill-top, var(--wds-color-black-100-transparent-0));
$header-divider-bottom: var(--wds-table-list-header-divider-fill-bottom, var(--wds-color-black-700));
$header-icon-fill: var(--wds-table-list-header-icon-fill, var(--wds-color-black-300));
$header-min-height: var(--wds-table-list-header-min-height, var(--wds-space-1200));
$header-font-weight: var(--wds-table-header-font-weight, var(--wds-font-weight-medium));
$cell-padding-inline: var(--wds-table-cell-padding-inline, var(--wds-space-200));
$row-divider-fill: var(--wds-table-row-divider-fill, var(--wds-color-black-100-transparent-0));
$border-dark-secondary-d70: var(--wds-color-border-dark-secondary, var(--wsr-color-D70, #ECEFF3));

.data-table {
  background-color: $item-fill;
  --wds-internal-table-action-cell-row-fill: #{$item-fill};

  & thead tr {
    height: $header-min-height;
  }

  &#{&}--virtualized thead th {
    height: $header-min-height;
  }

  & td,
  & th {
    padding-inline-start: $cell-padding-inline;
    padding-inline-end: $cell-padding-inline;
  }

  & td#{&}__cell--sticky,
  & th#{&}__header-cell--sticky {
    left: calc(var(--wds-internal-table-sticky-offset) + var(--wds-internal-table-sticky-padding-count, 0) * #{$cell-padding-inline});
  }

  & td:last-child,
  & th:last-child {
    padding-inline-start: $cell-padding-inline;
  }

  & td:first-child,
  & th:first-child {
    padding-inline-start: 24px;
    padding-inline-end: $cell-padding-inline;
  }

  & th#{&}__header-cell--skin-standard {
    background-color: $header-fill;
    box-shadow: inset 0 1px 0 0 $header-divider-top, inset 0 -1px 0 0 $header-divider-bottom;
  }

  & th &__th-container &__title-text {
    font-weight: $header-font-weight;
  }

  &#{&}--show-last-row-divider td {
    box-shadow: inset 0 -1px 0 0 $row-divider-fill;
  }

  &:not(#{&}--show-last-row-divider) tr:not(:last-child) td {
    box-shadow: inset 0 -1px 0 0 $row-divider-fill;
  }

  &:not(#{&}--show-last-row-divider) tr:nth-last-child(2) td#{&}__cell--has-row-details {
    box-shadow: none;
  }

  &#{&}--show-last-row-divider tr:nth-last-child(2) td#{&}__cell--has-row-details {
    box-shadow: inset 0 -1px 0 0 $row-divider-fill;
  }

  & td#{&}__details-cell {
    padding: 0;
    box-shadow: none;
  }

  & td#{&}__details-cell--active {
    padding: 0;
    box-shadow: inset 0 -1px 0 0 $border-dark-secondary-d70;
  }

  & &__row--active {
    background-color: $item-fill-active;
    --wds-internal-table-action-cell-row-fill: #{$item-fill-active};
  }

  & &__row--active td#{&}__cell--sticky {
    background-color: $item-fill-active;
  }

  &__sort-arrow {
    color: $header-icon-fill;
  }

  &__row--animated:nth-last-child(2) td {
    box-shadow: inset 0 1px 0 0 $border-dark-secondary-d70;
  }

  &__body-scroll-content::-webkit-scrollbar-thumb {
    background-color: chains.$scrollbar-fill;
    border: calc((12px - #{chains.$scrollbar-width}) / 2) solid transparent;
  }

  @media (hover: hover) {
    &__body-scroll-content::-webkit-scrollbar-thumb:hover {
      background-color: chains.$scrollbar-fill-hover;
    }
  }

  &__body-scroll-content::-webkit-scrollbar-thumb:active {
    background-color: chains.$scrollbar-fill-active;
  }

  @media (hover: hover) {
    & tr:hover#{&}__row--clickable td {
      background-color: $item-fill-hover;
      --wds-internal-table-action-cell-row-fill: #{$item-fill-hover};
    }

    & tr:hover#{&}__row--highlight td#{&}__cell--sticky-action-cell {
      background-color: $item-fill-hover;
    }

    & tr:hover#{&}__row--active td#{&}__cell--sticky-action-cell {
      background-color: $item-fill-hover;
    }
  }

  &__row-fill--skin-light {
    background-color: $item-fill;
  }

  &__row--skin-light:not(#{&}__row--active):not(#{&}__row--highlight) {
    background-color: $item-fill;
  }
}