@use 'sass:map';
@use '../utils/constants.scss';
@use '../utils/mixins.scss' as mixins;
@use '../utils/tokens.scss' as tokens;

@import '@viasat/beam-tokens/components/EmptyState';

$emptyStateBaseClass: '#{constants.$prefix}empty-state';

.#{$emptyStateBaseClass} {
  display: flex;
  flex-direction: column;
  max-width: tokens.$bm-comp-empty-state-size-width;
  align-items: center;
  gap: tokens.$bm-comp-empty-state-space-gap;

  &__icon,
  ::slotted([slot='icon']) {
    color: tokens.$bm-comp-empty-state-color-icon;
  }

  &__icon > svg,
  ::slotted([slot='icon']) {
    height: tokens.$bm-comp-empty-state-size-icon;
    width: tokens.$bm-comp-empty-state-size-icon;
  }

  &__body-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: tokens.$bm-comp-empty-state-space-text-gap;
  }

  &__heading,
  ::slotted([slot='heading']) {
    text-align: center;
    font: tokens.$bm-comp-empty-state-typo-heading;
    color: tokens.$bm-comp-empty-state-color-heading;
  }

  &__body,
  ::slotted([slot='body']) {
    display: flex;
    flex-direction: column;
    text-align: center;
    font: tokens.$bm-comp-empty-state-typo-body;
    color: tokens.$bm-comp-empty-state-color-body;
    gap: tokens.$bm-comp-empty-state-space-text-gap;
  }

  &__actions,
  ::slotted([slot='actions']) {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: tokens.$bm-comp-empty-state-space-actions-gap;
  }

  background-color: unset;
}