$secondary-gap-medium: var(--wds-table-action-cell-secondary-action-gap-medium, var(--wds-space-100));
$secondary-gap-small: var(--wds-table-action-cell-secondary-action-gap-small, var(--wds-space-100));
$secondary-gap-tiny: var(--wds-table-action-cell-secondary-action-gap-tiny, var(--wds-space-100));
$primary-gap-medium: var(--wds-table-action-cell-primary-action-gap-medium, var(--wds-space-200));
$primary-gap-small: var(--wds-table-action-cell-primary-action-gap-small, var(--wds-space-200));
$primary-gap-tiny: var(--wds-table-action-cell-primary-action-gap-tiny, var(--wds-space-200));

.table-action-cell {
  & > &__hover-slot::before,
  &__more-actions::before,
  &__placeholder-icon::before {
    opacity: var(--wds-table-action-cell-backdrop-opacity, 1);
  }

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