@layer kz-components {
  .link {
    color: var(--link-text-color, var(--color-blue-500));
    font-family: var(--typography-paragraph-body-font-family);
    font-size: var(--link-font-size, inherit);
    line-height: var(--link-line-height, inherit);
    font-weight: var(--typography-paragraph-body-font-weight);
    text-decoration: none;
    position: relative;
    white-space: nowrap;
    outline: 0;
  }

  .link[data-focus-visible] {
    outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
      var(--color-blue-500);
    outline-offset: 3px;
  }

  .isUnderlined {
    border-bottom: var(--spacing-1) solid var(--link-text-color, var(--color-blue-500));
  }

  .link .icon > * {
    vertical-align: text-bottom;
    font-size: var(--icon-font-size, 1em);
  }

  .iconStart {
    margin-inline-start: var(--text-icon-gap, 0.5em);
  }

  .iconEnd {
    margin-inline-end: var(--text-icon-gap, 0.5em);
  }

  .primary[data-hovered] {
    --link-text-color: var(--color-blue-600);
  }

  .primary[data-pressed] {
    --link-text-color: var(--color-blue-700);
  }

  .secondary {
    --link-text-color: var(--color-purple-800);
  }

  .secondary[data-hovered] {
    --link-text-color: var(--color-gray-600);
  }

  .secondary[data-pressed] {
    --link-text-color: var(--color-black);
  }

  [class*='extra-small'] .link.isInline,
  .extra-small {
    --link-font-size: var(--typography-paragraph-extra-small-font-size);
    --link-line-height: var(--typography-paragraph-extra-small-line-height);
    --icon-font-size: 0.875rem;
    --text-icon-gap: var(--spacing-2);
  }

  [class*='body'] .link.isInline,
  .body {
    --link-font-size: var(--typography-paragraph-body-font-size);
    --link-line-height: var(--typography-paragraph-body-line-height);
    --icon-font-size: 1.25rem;
    --text-icon-gap: var(--spacing-6);
  }

  [class*='intro-lede'] .link.isInline,
  .intro-lede {
    --link-font-size: var(--typography-paragraph-intro-lede-font-size);
    --link-line-height: var(--typography-paragraph-intro-lede-line-height);
    --icon-font-size: 1.5rem;
    --text-icon-gap: var(--spacing-8);
  }

  [class*='small']:not([class*='extra-small']) .link.isInline,
  .small {
    --link-font-size: var(--typography-paragraph-small-font-size);
    --link-line-height: var(--typography-paragraph-small-line-height);
    --icon-font-size: 1rem;
    --text-icon-gap: var(--spacing-4);
  }

  .white {
    --link-text-color: var(--color-white);
  }

  .white[data-focus-visible] {
    outline-color: var(--color-blue-300);
  }

  .white.isDisabled {
    --link-text-color: rgb(var(--color-white-rgb), 0.2);
  }

  .reversed {
    --link-text-color: var(--color-white);
  }

  .reversed[data-focus-visible] {
    outline-color: var(--color-blue-300);
  }

  .link.isDisabled {
    --link-text-color: var(--color-gray-400);
  }

  .reversed.isDisabled {
    --link-text-color: rgb(var(--color-white-rgb), 0.2);
  }
}