$fill: var(--wds-table-list-item-fill, var(--wds-color-black-100-transparent-0)) !default;
$fill-hover: var(--wds-table-list-item-fill-hover, var(--wds-color-fill-dark-secondary)) !default;
$fill-active: var(--wds-table-list-item-fill-active, var(--wds-color-black-600)) !default;
$fill-hover-draggable: var(--wds-table-list-item-fill-hover-draggable, var(--wds-color-fill-dark-secondary)) !default;
$fill-selected-hover: $fill-hover !default;
$fill-pressed: var(--wds-color-fill-standard-tertiary) !default;
$pressed-state: true !default;
$border-color: var(--wds-table-list-item-border-color, var(--wds-color-black-550));
$drag-handle: ':global([data-hook="drag-handle-button"])';

.table-list-item {
  background-color: $fill;
  --wds-internal-table-action-cell-row-fill: #{$fill};
  border-radius: var(--wds-table-list-item-border-radius, var(--wds-border-radius-400));

  &--border {
    border: 1px solid $border-color;
    border-radius: var(--wds-border-radius-surface-default, 6px);
  }

  &--border:not(#{&}--draggable) {
    border: 1px solid $border-color;
  }

  &--border-radius-none,
  &--border-radius-none#{&}--border {
    border-radius: 0px;
  }

  @media (hover: hover) {
    &--clickable:not(#{&}--selectable#{&}--checked):hover:not(#{&}--mobile) {
      background-color: $fill-hover;
      --wds-internal-table-action-cell-row-fill: #{$fill-hover};
    }
  }

  & &__handle-container #{$drag-handle} {
    color: var(--wds-table-list-item-drag-handle-color, var(--wds-color-text-standard-primary));
  }

  @media (hover: hover) {
    &:hover &__handle-container #{$drag-handle}:not([data-disabled='true']) {
      color: var(--wds-table-list-item-drag-handle-color-hover, var(--wds-color-text-standard-primary));
    }
  }

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

  @media (hover: hover) {
    &--clickable#{&}--selectable#{&}--checked:hover:not(#{&}--mobile),
    &#{&}#{&}--selectable#{&}--checked#{&}--draggable:hover {
      background-color: $fill-selected-hover;
      --wds-internal-table-action-cell-row-fill: #{$fill-selected-hover};
    }
  }

  &--show-divider {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: var(--wds-color-border-dark-secondary, var(--wsr-color-D60, #DFE5EB));
  }

  @media (hover: hover) {
    &#{&}#{&}--draggable:not(#{&}--drag-disabled):hover,
    &#{&}#{&}--dragging:not(#{&}--drag-disabled):hover {
      background-color: $fill-hover-draggable;
      --wds-internal-table-action-cell-row-fill: #{$fill-hover-draggable};
    }
  }

  @if $pressed-state {
    &#{&}#{&}#{&}#{&}--clickable:active {
      background-color: $fill-pressed;
      --wds-internal-table-action-cell-row-fill: #{$fill-pressed};
    }

    &#{&}#{&}#{&}#{&}--clickable#{&}--selectable#{&}--checked:active {
      background-color: $fill-active;
      --wds-internal-table-action-cell-row-fill: #{$fill-active};
    }
  }
}