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

<template>
  <GrHeading as="h3" weight="medium">Labels</GrHeading>
  <GrParagraph fontSize="sm" color="gray-100">Pequenos textos descritivos</GrParagraph>

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

      <section>
        <GrLabel weight="bold">
          Portland ugh fashion axe Helvetica, YOLO Echo Park Austin gastropub roof party. Meggings cred before they sold
          out messenger bag, ugh fashion axe Pitchfork tousled freegan asymmetrical literally twee Thundercats. <br />
          <span class="legend">L12 - Bold</span>
          <br />
        </GrLabel>
        <hr />
      </section>
    </section>
  </section>
</template>

<style lang="scss" scoped>
hr {
  border: 1px solid var(--gray-50);
}

.legend {
  font-family: Plus Jakarta Sans;
  font-size: 16px;
  font-style: italic;
  font-weight: 700;
  line-height: 24px;
  text-align: left;
  display: block;
  color: #009488;
  margin: 10px 0;
}
</style>
