@mixin standalone-link() { ... }@mixin standalone-link() { 
  @include link.link;

  display: inline-flex;
  align-items: flex-start;
  text-decoration: none;
  padding: spacing.get('s1');
  margin-left: unit.rem(-4px);

  &:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px currentColor;
    border-radius: spacing.get('s1');
    text-decoration: underline;
  }

  &:hover {
    color: color.get('link', 'focus', 'primary');
  }

  &:active {
    color: color.get('link', 'pressed', 'primary');

    ~ &__svg {
      fill: currentColor;
    }
  }

  &:visited {
    ~ &__svg {
      fill: currentColor;
    }
  }
 }

@mixin standalone-link-variant($size) { ... }@mixin standalone-link-variant($size) { 
  @if $size == 'xs' {
    @include typography.style-as('utility-2', 'strong');
  } @else if $size == 'small' {
    @include typography.style-as('utility-3', 'strong');
  } @else {
    @include typography.style-as('utility-4', 'strong');
  }
 }

@mixin standalone-link-icon-svg($size) { ... }@mixin standalone-link-icon-svg($size) { 
  $style: 'utility-4';
  @if $size == 'xs' {
    $style: 'utility-2';
  } @else if $size == 'small' {
    $style: 'utility-3';
  }

  $font-size: typography.get($style, 'font-size');
  $line-height: typography.get($style, 'line-height');

  position: relative;
  top: calc(($line-height - 1) * $font-size / 2);
  width: $font-size;
  height: auto;
  fill: currentColor;
 }

@mixin standalone-link-label() { ... }@mixin standalone-link-label() { 
  padding-right: spacing.get('s1');
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: typography.get('utility-4', 'line-height');
 }