<template>
  <p class="instance-beta">
    {{ title($t('general.header.title')) }}
    <span class="beta">{{ $t('general.header.beta_text') }}</span>
  </p>
</template>

<script lang="ts" setup>
import { title } from '@/utils/index'
</script>

<style lang="scss" scoped>
.beta {
  @include text(xs-r-regular);
  color: var(--red);
  border: toRem(0.1) solid var(--red);
  border-radius: toRem(0.5);
  padding: toRem(0.2) toRem(0.3);
  margin-left: toRem(0.5);
  position: absolute;
  top: toRem(-1);
  right: toRem(-9.5);
  width: toRem(9);
  display: flex;
  justify-content: center;
}

@media (max-width: toRem(76.8)) {
  .instance-beta {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--grey);
    padding: toRem(1);
    margin-bottom: 0;
  }
  .beta {
    position: relative;
    top: initial;
    right: initial;
    margin-left: toRem(1);
  }
}
</style>
