<template>
  <div class="loading-message">
    <loading-spinner
      class="loading-message__spinner"
      style="--spinner-size: 40px"
    />
    <span class="loading-message__text"><slot></slot> </span>
  </div>
</template>

<script setup lang="ts">
import LoadingSpinner from '@/components/ui/loadingSpinner.vue';
</script>

<style scoped lang="scss">
@import 'styles/helpers';

.loading-message {
  display: flex;
  align-items: center;

  &__icon {
    margin-right: $large-spacing;
  }

  &__text {
    @include regular-text;
    color: $color-brand;
    margin-left: $medium-spacing;
    margin-right: $medium-spacing;
  }
}
</style>
