/**
 * Do not edit directly, this file was auto-generated.
 */
.jkl-navlink--beta {
  --border-radius: 4px;
  --separator: 1px solid var(--jkl-color-border-subdued);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 2em;
  color: inherit;
  text-decoration: none;
  background-color: var(--jkl-color-background-page);
  padding: var(--jkl-spacing-s);
  border-radius: 0;
  font: var(--jkl-text-style-paragraph-medium);
  transition-timing-function: var(--jkl-motion-easing-ease-in-bounce-out);
  transition-duration: var(--jkl-motion-timing-productive);
  transition-property: background-color;
}
.jkl-navlink--beta .title,
.jkl-navlink--beta .description {
  grid-column: 1;
}
.jkl-navlink--beta:has(.description) .title {
  font-weight: bold;
}
.jkl-navlink--beta::after {
  content: "arrow_forward"/"";
  grid-column: 2;
  grid-row: 1/span 999;
  translate: 0;
  font-family: var(--jkl-font-family-icons);
  font-variation-settings: "FILL" var(--jkl-icon-fill, 0);
  font-feature-settings: "liga";
  -webkit-font-feature-settings: "liga";
  font-size: 1.3em;
  font-weight: 400;
  line-height: 1;
  display: inline-block;
  flex-shrink: 0;
  -webkit-font-smoothing: antialiased;
  transition-timing-function: var(--jkl-motion-easing-standard);
  transition-duration: var(--jkl-motion-timing-energetic);
  transition-property: font-variation-settings, transform;
  transition-timing-function: var(--jkl-motion-easing-ease-in-bounce-out);
  transition-duration: var(--jkl-motion-timing-productive);
  transition-property: translate;
}
.jkl-navlink--beta:hover, .jkl-navlink--beta:focus-visible {
  background-color: color-mix(in srgb, currentColor 15%, transparent);
}
.jkl-navlink--beta:hover::after, .jkl-navlink--beta:focus-visible::after {
  translate: 4px 0;
}
.jkl-navlink--beta:first-of-type {
  border-start-start-radius: var(--border-radius);
  border-start-end-radius: var(--border-radius);
}
.jkl-navlink--beta:last-of-type {
  border-end-start-radius: var(--border-radius);
  border-end-end-radius: var(--border-radius);
}
.jkl-navlink--beta:has(+ .jkl-navlink--beta) {
  border-block-end: var(--separator);
}