$fill: var(--wds-table-list-item-fill, var(--wds-color-fill-dark-tertiary));
$fill-hover: var(--wds-table-list-item-fill-hover, var(--wds-color-fill-dark-tertiary-hover));
$fill-active: var(--wds-table-list-item-fill-active, var(--wds-color-fill-dark-tertiary-active));
$fill-hover-draggable: var(--wds-table-list-item-fill-hover-draggable, var(--wds-color-fill-dark-tertiary-hover));
$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};
  gap: var(--wds-table-list-item-controls-padding-medium, var(--wds-space-200));
  border-radius: var(--wds-table-list-item-border-radius, var(--wds-border-radius-600));

  &--no-visible-controls {
    gap: unset;
  }

  &--drag-handle-size-small {
    gap: var(--wds-space-200, 12px);
  }

  &--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};
    }
  }

  &__controls-container {
    gap: var(--wds-table-list-item-controls-gap-medium, var(--wds-space-100));
  }

  &__controls-container--drag-handle-size-small {
    gap: var(--wds-space-100, 6px);
  }

  & &__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));
    }
  }

  &__checkbox {
    margin-left: var(--wds-table-list-item-checkbox-offset, var(--wds-space-100));
  }

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

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

  &--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};
    }
  }
}