<template>
  <div class="info-message">
    <info-icon class="info-message__icon" />
    <span class="info-message__text"><slot></slot> </span>
  </div>
</template>

<script setup lang="ts">
import InfoIcon from '@/components/icons/InfoIcon.vue';
</script>

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

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

  &__icon {
    width: $large-icon-dimension;
    height: $large-icon-dimension;
    fill: $color-brand;
    margin-right: $small-spacing;
  }

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