<script setup lang="ts">
import { GrHeading } from "@/components";
import { GrParagraph } from "@/components";
</script>

<template>
  <GrHeading as="h3" weight="medium">Text Selection</GrHeading>
  <GrParagraph fontSize="sm" color="gray-100">Exemplo de texto selecionado pelo usuário</GrParagraph>

  <section style="margin-top: 20px; margin-bottom: 20px; display: flex; flex-direction: column; gap: 15px">
    <section style="display: flex; gap: 20px">
      <section>
        <GrParagraph weight="medium" font-size="sm">
          Portland ugh fashion axe Helvetica, YOLO Echo Park Austin <br />
          gastropub roof party.<mark> Meggings cred </mark> before they sold out <br />
          messenger bag, ugh fashion axe Pitchfork tousled freegan <br />
          asymmetrical literally twee Thundercats.
        </GrParagraph>
      </section>
    </section>
  </section>
</template>

<style lang="scss" scoped>
mark {
  color: var(--primary-500);
  background: var(--primary-200);
}
</style>
