/**
 * Do not edit directly, this file was auto-generated.
 */
@layer jokul.components {
  .jkl-nav-link {
    color: var(--jkl-color-text-default);
    box-sizing: border-box;
    font-weight: var(--jkl-typography-weight-normal);
    text-decoration: none;
    position: relative;
    padding-right: 0.15rem;
    margin-right: -0.15rem;
  }
  .jkl-nav-link {
    outline: 0;
    border-style: none;
    outline-style: none;
  }
  .jkl-nav-link:active, .jkl-nav-link:hover, .jkl-nav-link:focus {
    outline: 0;
    outline-style: none;
  }
  @media screen and (forced-colors: active) {
    .jkl-nav-link {
      outline: revert;
      border-style: revert;
      outline-style: revert;
    }
    .jkl-nav-link:active, .jkl-nav-link:hover, .jkl-nav-link:focus {
      outline: revert;
      outline-style: revert;
    }
  }
  .jkl-nav-link:hover:not(:focus) {
    color: var(--jkl-color-text-subdued);
  }
  .jkl-nav-link:focus-visible {
    outline: 3px solid var(--jkl-color-border-action);
    outline-offset: 0;
  }
  .jkl-nav-link:focus-visible .jkl-nav-link__icon, .jkl-nav-link:hover:not(:focus) .jkl-nav-link__icon {
    transform: translateX(0.3rem);
  }
  .jkl-nav-link__icon {
    margin-inline-start: 0.1em;
    margin-block-start: -0.1em;
    vertical-align: middle;
    transition-timing-function: ease;
    transition-duration: 150ms;
    transition-property: transform;
  }
  .jkl-nav-link--active {
    --jkl-icon-weight: 400;
    font-weight: 700;
    letter-spacing: -0.014em;
  }
  .jkl-nav-link--back {
    padding-right: 0;
    margin-right: 0;
    padding-left: 0.15rem;
    margin-left: -0.15rem;
  }
  .jkl-nav-link--back .jkl-nav-link__icon {
    margin-inline: 0 0.1em;
  }
  .jkl-nav-link--back:focus-visible .jkl-nav-link__icon, .jkl-nav-link--back:hover:not(:focus) .jkl-nav-link__icon {
    padding-left: 0;
    transform: translateX(-0.3rem);
  }
}