// Consumer-overridable CSS variable, not a theme token — keep it when deprecating component-level tokens.
$fade: var(--wds-table-action-cell-backdrop-fade-width, 48px);
$row-fill: var(--wds-internal-table-action-cell-row-fill, transparent);
$backdrop-fill: var(--wds-color-fill-dark-tertiary, #ffffff);
$secondary-gap-medium: var(--wds-table-action-cell-secondary-action-gap-medium, var(--wds-space-200, 12px));
$secondary-gap-small: var(--wds-table-action-cell-secondary-action-gap-small, var(--wds-space-200, 12px));
$secondary-gap-tiny: var(--wds-table-action-cell-secondary-action-gap-tiny, var(--wds-space-100, 6px));
$primary-gap-medium: var(--wds-table-action-cell-primary-action-gap-medium, var(--wds-space-200, 12px));
$primary-gap-small: var(--wds-table-action-cell-primary-action-gap-small, var(--wds-space-200, 12px));
$primary-gap-tiny: var(--wds-table-action-cell-primary-action-gap-tiny, var(--wds-space-100, 6px));

.table-action-cell {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;

  &__hover-slot,
  &__more-actions,
  &__placeholder-icon {
    position: relative;
  }

  & > &__hover-slot::before,
  &__more-actions::before,
  &__placeholder-icon::before {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    inset-inline-start: calc(-1 * #{$fade});
    pointer-events: none;
    opacity: var(--wds-table-action-cell-backdrop-opacity, 0);
    background-image:
      linear-gradient(to right, transparent, $row-fill $fade),
      linear-gradient(to right, transparent, $backdrop-fill $fade);
  }

  :global(.rtl) & > &__hover-slot::before,
  :global(.rtl) &__more-actions::before,
  :global(.rtl) &__placeholder-icon::before,
  :global([dir='rtl']) & > &__hover-slot::before,
  :global([dir='rtl']) &__more-actions::before,
  :global([dir='rtl']) &__placeholder-icon::before {
    background-image:
      linear-gradient(to left, transparent, $row-fill $fade),
      linear-gradient(to left, transparent, $backdrop-fill $fade);
  }

  &--size-tiny {
    height: 24px;
  }

  &--size-small {
    height: 30px;
  }

  &--size-medium {
    height: 36px;
  }

  &__action {
    position: relative;
    z-index: 1;
  }

  &__hover-slot {
    display: flex;
  }

  &__hover-slot &__action {
    margin: 0 6px;
    transition-property: background, border;
  }

  &__hover-slot &__action#{&}__action--size-tiny {
    margin: 0 3px;
  }

  &__hover-slot &__action#{&}__action--icon-action {
    margin: 0 calc(#{$secondary-gap-medium} / 2);
  }

  &__hover-slot &__action#{&}__action--icon-action#{&}__action--size-small {
    margin: 0 calc(#{$secondary-gap-small} / 2);
  }

  &__hover-slot &__action#{&}__action--icon-action#{&}__action--size-tiny {
    margin: 0 calc(#{$secondary-gap-tiny} / 2);
  }

  &__secondary-actions,
  &__more-actions {
    margin-inline-start: calc(6px - #{$secondary-gap-medium} / 2);
  }

  &__secondary-actions:last-child,
  &__more-actions {
    margin-inline-end: calc(6px - #{$secondary-gap-medium} / 2);
  }

  &--size-small &__secondary-actions,
  &--size-small &__more-actions {
    margin-inline-start: calc(6px - #{$secondary-gap-small} / 2);
  }

  &--size-small &__secondary-actions:last-child,
  &--size-small &__more-actions {
    margin-inline-end: calc(6px - #{$secondary-gap-small} / 2);
  }

  &--size-tiny &__secondary-actions,
  &--size-tiny &__more-actions {
    margin-inline-start: calc(3px - #{$secondary-gap-tiny} / 2);
  }

  &--size-tiny &__secondary-actions:last-child,
  &--size-tiny &__more-actions {
    margin-inline-end: calc(3px - #{$secondary-gap-tiny} / 2);
  }

  & &__hover-slot + &__secondary-actions,
  & &__hover-slot + &__more-actions {
    margin-inline-start: calc(#{$primary-gap-medium} - 6px - #{$secondary-gap-medium} / 2);
  }

  &--size-small &__hover-slot + &__secondary-actions,
  &--size-small &__hover-slot + &__more-actions {
    margin-inline-start: calc(#{$primary-gap-small} - 6px - #{$secondary-gap-small} / 2);
  }

  &--size-tiny &__hover-slot + &__secondary-actions,
  &--size-tiny &__hover-slot + &__more-actions {
    margin-inline-start: calc(#{$primary-gap-tiny} - 3px - #{$secondary-gap-tiny} / 2);
  }

  & &__hover-slot#{&}__secondary-actions + &__more-actions {
    margin-inline-start: 0;
  }

  &__placeholder-icon {
    margin: 0 6px;
  }

  :global(.rtl) &__placeholder-icon svg,
  :global([dir='rtl']) &__placeholder-icon svg {
    transform: scaleX(-1);
  }
}