@use "../../styles/tokens/typography" as *;

.link__container {
  width: fit-content;
  display: inline-flex;
  align-items: center;
}
.link {
  text-decoration: none;
  color: var(--nds-primary);
  @include text-base;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: var(--nds-spacing-3xs);
  border-bottom: 1px solid transparent;
  transition:
    border-color 130ms ease,
    color 130ms ease;
  &:hover {
    border-bottom-color: var(--nds-primary);
  }
  &:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--nds-ring);
    border-radius: var(--nds-radius-xs);
  }
}