$secondary-gap-medium: var(--wds-table-action-cell-secondary-action-gap-medium, 12px);
$secondary-gap-small: var(--wds-table-action-cell-secondary-action-gap-small, 12px);
$secondary-gap-tiny: var(--wds-table-action-cell-secondary-action-gap-tiny, 6px);
$primary-gap-medium: var(--wds-table-action-cell-primary-action-gap-medium, 12px);
$primary-gap-small: var(--wds-table-action-cell-primary-action-gap-small, 12px);
$primary-gap-tiny: var(--wds-table-action-cell-primary-action-gap-tiny, 6px);

.table-action-cell {
  &__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;
  }
}