$fill: var(
  --wds-table-list-item-fill,
  var(--wds-color-fill-standard-tertiary, var(--wsr-color-D80, #FFFFFF))
);
$fill-hover: var(
  --wds-table-list-item-fill-hover,
  var(--wds-color-fill-standard-tertiary-hover, var(--wsr-color-B50, #E7F0FF))
);
$fill-active: var(
  --wds-table-list-item-fill-active,
  var(--wds-color-fill-standard-tertiary-active, var(--wsr-color-B40, #D6E6FE))
);
$fill-hover-draggable: var(
  --wds-table-list-item-fill-hover-draggable,
  var(--wds-color-blue-500, var(--wsr-color-B50, #E7F0FF))
);
$action-cell: '.table-action-cell';
$hover-slot: '.table-action-cell__hover-slot';
$on-hover: '.table-action-cell__hover-slot--display-on-hover';
$not-on-hover: '.table-action-cell__hover-slot--display-not-on-hover';
$placeholder-icon: '.table-action-cell__placeholder-icon';
$drag-handle: ':global([data-hook="drag-handle-button"])';

.table-list-item {
  background-color: $fill;
  --wds-internal-table-action-cell-row-fill: #{$fill};
  display: flex;
  gap: var(--wds-table-list-item-controls-padding-medium, var(--wds-space-300, 18px));
  padding-block: 0;
  padding-block: var(--padding-vertical);
  padding-inline: var(--padding-horizontal);
  margin: var(--wds-table-list-item-paddings, var(--wds-space-0, 0px));
  border-radius: var(--wds-table-list-item-border-radius, var(--wds-border-radius-0, 0px));

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

  &--vertical-padding-xx-tiny {
    --padding-vertical: 3px;
  }

  &--vertical-padding-x-tiny {
    --padding-vertical: 6px;
  }

  &--vertical-padding-tiny {
    --padding-vertical: 12px;
  }

  &--vertical-padding-small {
    --padding-vertical: 15px;
  }

  &--vertical-padding-medium {
    --padding-vertical: 18px;
  }

  &--vertical-padding-large {
    --padding-vertical: 24px;
  }

  &--horizontal-padding-xx-tiny {
    --padding-horizontal: 3px;
  }

  &--horizontal-padding-x-tiny {
    --padding-horizontal: 6px;
  }

  &--horizontal-padding-tiny {
    --padding-horizontal: 12px;
  }

  &--horizontal-padding-small {
    --padding-horizontal: 15px;
  }

  &--horizontal-padding-medium {
    --padding-horizontal: 18px;
  }

  &--horizontal-padding-large {
    --padding-horizontal: 24px;
  }

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

  &--border {
    border: 1px solid
      var(
        --wds-table-list-item-border-color,
        var(--wds-color-border-standard-secondary, var(--wsr-color-B40, #D6E6FE))
      );
    border-radius: var(--wds-border-radius-surface-default, 6px);
  }

  &--border:not(#{&}--draggable) {
    border: 1px solid
      var(
        --wds-table-list-item-border-color,
        var(--wds-color-border-standard-secondary, var(--wsr-color-D10-10, rgba(0, 6, 36, 0.10)))
      );
  }

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

  &--drag-disabled {
    cursor: not-allowed;
  }

  &--clickable:not(#{&}--draggable) {
    cursor: pointer;
  }

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

  &:focus-visible,
  &--hide-drag-handle:has(#{&}__handle-container:focus-within) {
    position: relative;
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: var(--wds-outline-focus-outer, 3px solid var(--wsr-color-B10, #116DFF));
    outline-offset: 1px;
    z-index: 1;
  }

  &:focus-visible::before,
  &--hide-drag-handle:has(#{&}__handle-container:focus-within)::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: var(--wds-outline-focus-inner, 1px solid var(--wsr-color-D80, #FFFFFF));
  }

  &__controls-container {
    display: flex;
    gap: var(--wds-table-list-item-controls-gap-medium, var(--wds-space-200, 12px));
  }

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

  &__handle-container {
    display: flex;
    align-items: center;
  }

  & &__handle-container #{$drag-handle} {
    color: var(--wds-table-list-item-drag-handle-color, var(--wds-color-text-primary, rgba(47, 93, 255, 1)));
  }

  @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-fill-standard-primary, var(--wsr-color-B10, #116DFF))
      );
    }
  }

  &__handle-container--hidden {
    visibility: hidden;
  }

  &--hide-drag-handle &__handle-container {
    border: 0;
    /* stylelint-disable-next-line plugin/use-baseline */
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
  }

  &--show-drag-handle-on-hover &__handle-container {
    visibility: hidden;
  }

  @media (hover: hover) {
    &--show-drag-handle-on-hover:hover &__handle-container {
      visibility: visible;
    }
  }

  &__checkbox {
    display: flex;
    cursor: pointer;
    margin-left: var(--wds-table-list-item-checkbox-offset, var(--wds-space-0, 0px));
    margin-right: 2px;
  }

  &--show-selection-border#{&}--checked:not(#{&}--border):not(#{&}--selectable) {
    border-left-width: 2px;
    border-left-style: solid;
    border-left-color: var(--wds-color-border-standard-primary-active, var(--wsr-color-B10, #116DFF));
    padding-inline-start: calc(var(--padding-horizontal) - 2px);
    padding-inline-end: var(--padding-horizontal);
  }

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

  &__expand-handle {
    display: flex;
    align-items: center;
  }

  &__expand-handle--expandable {
    cursor: pointer;
  }

  &__expand-handle--hidden {
    visibility: hidden;
  }

  &__caret-icon {
    color: var(--wds-color-text-standard-secondary, var(--wsr-color-D10, #000624));
    transition: all 0.2s ease;
  }

  &__caret-icon--expanded {
    transform: rotate(90deg);
  }

  &__options-container {
    display: grid;
    gap: var(--wds-table-list-item-gap, var(--wds-space-400, 24px));
    width: 100%;
    align-items: center;
  }

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

  &__align {
    display: grid;
  }

  &__align--position-left {
    justify-self: start;
  }

  &__align--position-center {
    justify-self: center;
  }

  &__align--position-right {
    justify-self: end;
  }

  & #{$action-cell} #{$hover-slot}#{$on-hover} {
    opacity: 0;
  }

  &:focus-within #{$action-cell} #{$hover-slot}#{$on-hover} {
    opacity: 1;
  }

  @media (hover: hover) {
    &:hover #{$action-cell} #{$hover-slot}#{$on-hover} {
      opacity: 1;
    }
  }

  & #{$action-cell} #{$hover-slot}#{$not-on-hover} {
    opacity: 1;
  }

  &:focus-within #{$action-cell} #{$hover-slot}#{$not-on-hover} {
    opacity: 0;
  }

  &:focus-within #{$action-cell} #{$placeholder-icon} {
    display: none;
  }

  @media (hover: hover) {
    &:hover #{$action-cell} #{$hover-slot}#{$not-on-hover} {
      opacity: 0;
    }

    &:hover #{$action-cell} #{$placeholder-icon} {
      display: none;
    }

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

  @media (prefers-reduced-motion) {
    &__caret-icon {
      transition: none;
    }
  }
}