@layer components {
  ._root_pgzii_2 {
    font-weight: 500;
    line-height: var(--line-height-xs);
    text-wrap: balance;
  }
  ._root_pgzii_2:where([data-size=sm]) {
    font-size: var(--font-size-lg);
  }
  ._root_pgzii_2:where([data-size=md]) {
    font-size: var(--font-size-xl);
  }
  ._root_pgzii_2:where([data-size=lg]) {
    font-size: var(--font-size-2xl);
  }
  ._root_pgzii_2:where([data-color=accent]) {
    color: var(--color-accent);
  }
  ._root_pgzii_2 :where(b, strong) {
    font-weight: inherit;
  }
  ._root_1dp0j_2 {
    --underline-thickness:max(.0625em, 1px);
    cursor: pointer;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    max-inline-size: fit-content;
    padding-block: .0625em;
  }
  @media (prefers-reduced-motion: no-preference) {
    ._root_1dp0j_2 {
      transition: color .15s linear, background-size .3s ease-out;
    }
  }
  ._root_1dp0j_2:where([data-underline=initial]) {
    background-position: right 100% bottom 0;
    background-size: 100% var(--underline-thickness);
  }
  @media (any-hover: hover) {
    ._root_1dp0j_2:where([data-underline=initial]):where(:hover) {
      background-position: left 100% bottom 0;
      background-size: 0 var(--underline-thickness);
    }
  }
  ._root_1dp0j_2:where([data-underline=initial]):where(:focus-visible, :active),
  ._root_1dp0j_2:where([data-underline=hover]) {
    background-position: left 100% bottom 0;
    background-size: 0 var(--underline-thickness);
  }
  @media (any-hover: hover) {
    ._root_1dp0j_2:where([data-underline=hover]):where(:hover) {
      background-position: right 100% bottom 0;
      background-size: 100% var(--underline-thickness);
    }
  }
  ._root_1dp0j_2:where([data-underline=hover]):where(:is(:focus-visible, :active)) {
    background-position: right 100% bottom 0;
    background-size: 100% var(--underline-thickness);
  }
}