@layer clickui {.link__Ly-e3 {
  display: inline-flex;
  margin: 0;
  align-items: center;
  gap: var(--link-gap);
  color: var(--click-global-color-text-link-default);
  font: var(--link-font);
  text-decoration: none;
}

.link__Ly-e3:hover,
.link__Ly-e3:focus {
  color: var(--click-global-color-text-link-hover);
  text-decoration: underline;
  cursor: pointer;
  transition: var(--transition-default);
}

.link__Ly-e3:visited {
  color: var(--click-global-color-text-link-default);
}

/* The original emitted theme.click.link.space.sm.gap for size xs/sm and
   theme.click.link.space.md.gap for md/lg. Alias to a local custom property
   so the gap/margin-right rule on .link stays single-source. */
.link_size_xs__kYknu,
.link_size_sm__Qqpi3 {
  --link-gap: var(--click-link-space-sm-gap);
}

.link_size_md__QlDJt,
.link_size_lg__FkICb {
  --link-gap: var(--click-link-space-md-gap);
}

/* Size + weight compose to pick a single typography token —
   theme.typography.styles.product.text[$weight][$size]. Emit one compound
   class per combination and set --link-font, which the base .link rule
   consumes. */
.link_size_xs__kYknu.link_weight_normal__shPkj {
  --link-font: var(--typography-styles-product-text-normal-xs);
}

.link_size_sm__Qqpi3.link_weight_normal__shPkj {
  --link-font: var(--typography-styles-product-text-normal-sm);
}

.link_size_md__QlDJt.link_weight_normal__shPkj {
  --link-font: var(--typography-styles-product-text-normal-md);
}

.link_size_lg__FkICb.link_weight_normal__shPkj {
  --link-font: var(--typography-styles-product-text-normal-lg);
}

.link_size_xs__kYknu.link_weight_medium__Sot5E {
  --link-font: var(--typography-styles-product-text-medium-xs);
}

.link_size_sm__Qqpi3.link_weight_medium__Sot5E {
  --link-font: var(--typography-styles-product-text-medium-sm);
}

.link_size_md__QlDJt.link_weight_medium__Sot5E {
  --link-font: var(--typography-styles-product-text-medium-md);
}

.link_size_lg__FkICb.link_weight_medium__Sot5E {
  --link-font: var(--typography-styles-product-text-medium-lg);
}

.link_size_xs__kYknu.link_weight_semibold__6STFO {
  --link-font: var(--typography-styles-product-text-semibold-xs);
}

.link_size_sm__Qqpi3.link_weight_semibold__6STFO {
  --link-font: var(--typography-styles-product-text-semibold-sm);
}

.link_size_md__QlDJt.link_weight_semibold__6STFO {
  --link-font: var(--typography-styles-product-text-semibold-md);
}

.link_size_lg__FkICb.link_weight_semibold__6STFO {
  --link-font: var(--typography-styles-product-text-semibold-lg);
}

.link_size_xs__kYknu.link_weight_bold__FWQyo {
  --link-font: var(--typography-styles-product-text-bold-xs);
}

.link_size_sm__Qqpi3.link_weight_bold__FWQyo {
  --link-font: var(--typography-styles-product-text-bold-sm);
}

.link_size_md__QlDJt.link_weight_bold__FWQyo {
  --link-font: var(--typography-styles-product-text-bold-md);
}

.link_size_lg__FkICb.link_weight_bold__FWQyo {
  --link-font: var(--typography-styles-product-text-bold-lg);
}

.link_size_xs__kYknu.link_weight_mono__Mzdum {
  --link-font: var(--typography-styles-product-text-mono-xs);
}

.link_size_sm__Qqpi3.link_weight_mono__Mzdum {
  --link-font: var(--typography-styles-product-text-mono-sm);
}

.link_size_md__QlDJt.link_weight_mono__Mzdum {
  --link-font: var(--typography-styles-product-text-mono-md);
}

.link_size_lg__FkICb.link_weight_mono__Mzdum {
  --link-font: var(--typography-styles-product-text-mono-lg);
}

/* The inner Icon is a `link__icon` element — it receives the scoped class via
   className. The original used a descendant selector inside IconWrapper; here we
   pass the scoped class straight to the Icon so the selector stays a single
   class with the same effective specificity. */
/* stylelint-disable-next-line block-no-empty -- base element required by BEM */
.link__icon__El8JR {
}

.link__icon_size_xs__qMUN-,
.link__icon_size_sm__d2ZIU {
  width: var(--click-link-icon-size-sm-width);
  height: var(--click-link-icon-size-sm-height);
}

.link__icon_size_md__-5EZ1,
.link__icon_size_lg__RY5Y1 {
  width: var(--click-link-icon-size-md-width);
  height: var(--click-link-icon-size-md-height);
}
}