:host {
  display: block;
}

.card-actions {
  display: flex;
  justify-content: center;
  gap: var(--bi-scale-1x);
  border-radius: inherit;
  height: 100%;
  width: var(--bi-scale-14x);

  @media (width < 768px) {
    width: var(--bi-scale-11x);
  }

  &[data-orientation='vertical'] {
    flex-direction: column;
  }

  &[data-bg='neutral'] {
    background-color: var(--bi-neutral-10);
  }

  &[data-bg='primary'] {
    background-color: var(--bi-primary-5);
  }
}