@use '../core' as *;

.#{$prefix}-empty-state {
  border: $spacing-xxs dashed $color-black-100;
  border-radius: $spacing-xs;
  background-color: $color-black-000;
  display: flex;
  flex-direction: column;
  padding: $spacing-xxl $spacing-md;
  text-align: center;

  &__content {
    color: $color-black-400;
  }

  &__actions {
    margin-top: $spacing-md;
  }

  &__actions > * {
    width: 100%;
    justify-content: center;
  }

  &__actions > *:not(:first-child) {
    margin-top: $spacing-sm;
  }
}

@include mq($breakpoint-md) {
  .#{$prefix}-empty-state {
    &__actions {
      display: flex;
      justify-content: center;
    }

    &__actions > * {
      width: auto;
    }

    &__actions > *:not(:first-child) {
      margin-top: 0;
      margin-left: $spacing-sm;
    }
  }
}