//
//  DIALTONE
//  COMPONENTS: EMPTY-STATE
//
//  These are the styles for empty-state component.
//
//
//  TABLE OF CONTENTS
//  • BASE STYLE

//  @@  BASE STYLE
//  ----------------------------------------------------------------------------
.d-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--dt-space-600);
  text-align: center;

  &__icon {
    color: var(--dt-color-foreground-tertiary);
    line-height: 0;
  }

  &__illustration {
    line-height: 0;
  }

  &__content {
     padding: var(--dt-space-600) 0;
  }

  &__content--sm {
    padding: var(--dt-space-500) 0;
  }

  &__header-text {
     text-wrap: balance;
  }

  &__body-text {
    color: var(--dt-color-foreground-secondary);
    text-wrap: balance;
  }

  &--size-sm {
    width: var(--dt-size-50-percent);
    padding: var(--dt-space-500);
  }

  &--size-md {
    width: var(--dt-size-70-percent);
    padding: var(--dt-space-500);
  }
}