/**
 * Do not edit directly, this file was auto-generated.
 */
@layer jokul.components {
  .jkl-link-list {
    --background: var(--jkl-color-background-container);
    --border: 1px solid var(--jkl-color-border-subdued);
    --text-color: var(--jkl-color-text-default);
    font: var(--jkl-text-style-paragraph-medium);
  }
  .jkl-link-list .jkl-link-list-title {
    margin-block-end: var(--jkl-unit-10);
    font: var(--jkl-text-style-paragraph-small);
  }
  .jkl-link-list ul {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
    margin: 0;
    height: min-content;
    border-radius: var(--jkl-border-radius-s);
    overflow: hidden;
    background-color: var(--background);
  }
  .jkl-link-list ul .jkl-link-list-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--jkl-unit-20);
    width: 100%;
    text-decoration: none;
    color: var(--text-color);
    text-wrap: balance;
    box-sizing: border-box;
    padding: var(--jkl-unit-20);
    font: var(--jkl-text-style-text-medium);
    transition-timing-function: var(--jkl-motion-easing-standard);
    transition-duration: var(--jkl-motion-timing-productive);
    transition-property: background;
  }
  .jkl-link-list ul .jkl-link-list-link::after {
    content: "arrow_forward"/"";
    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-standard);
    transition-duration: var(--jkl-motion-timing-productive);
    transition-property: translate;
  }
  .jkl-link-list ul .jkl-link-list-link:is(:hover, :focus-visible) {
    background-color: var(--jkl-color-background-container-accent);
  }
  .jkl-link-list ul .jkl-link-list-link:is(:hover, :focus-visible)::after {
    translate: 4px 0;
  }
  .jkl-link-list ul .jkl-link-list-link:focus-visible {
    outline: 3px solid var(--jkl-color-border-strong);
    outline-offset: 3px;
  }
  .jkl-link-list[data-outlined=true] ul {
    border: var(--border);
    --background: transparent;
  }
  .jkl-link-list .jkl-link-list-item {
    display: flex;
  }
  .jkl-link-list .jkl-link-list-item:not(:last-of-type) .jkl-link-list-link {
    border-block-end: var(--border);
  }
  .jkl-link-list:has(ul) .jkl-link-list-title {
    margin-inline-start: var(--jkl-unit-05);
  }
}